点击提交按钮,页面没有反应

来源:3-2 todolist组件拆分

慕粉320551810

2020-04-17 11:41

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>TodoList</title>

    <script src="./vue.js"></script>

</head>

<body>

    <div id="root">

       <div>

           <input v-model="inputValue"/>

           <button @click="handleSubmit">提交</button>

       </div>

       <ul>

           <todo-item v-for="(item,index) of list"

           :key= "index"

           :content="item">

        </todo-item>

       </ul>

    </div>


    <script>

        // 全局组件

            Vue.component('todo-item',{

                props:['content'],

                template:'<li>{{content}}</li>'

            })


        // var TodoItem = {

        //     template: '<li>item</li>'

        // }



        new Vue({

            el:"#root", 

            components:{

                'todo-item':TodoItem

            },

            data:{

                inputValue:'',

                list: []

            },

            methods:{

                handleSubmit: function(){

                    this.list.push(this.inputValue)

                    this.inputValue=''

                }

            }

        })

    </script>

</body>

</html>


写回答 关注

2回答

  • qq_累哦_0
    2020-05-27 09:27:47

    调试下呗,chrome f12 打开控制台就知道问题了

  • 慕粉320551810
    2020-04-17 21:38:20

    我找到问题了。。components那里应该删掉  对不起 我不知道 咋删问题???

vue2.5入门

快速理解Vue编程理念上手Vue2.0开发。

146820 学习 · 657 问题

查看课程

相似问题