Vue.component('todo-item',{ template:'<li>item</li>' }); export default { data:function(){ return { // title :'<span>?</span>This is my first way', items:[], newItem:'', childWold:'', isFinished:'thisIsLiClass', ishouse:'thisisLihouse', firstName:'', lastName:'', count:0, title:'this is hello world', content:'balabalabalaba', show:true, inputValue:'' } }, computed:{ fullName:function(){ return this.firstName + ' ' + this.lastName } }, watch:{ fullName:function(){ this.count++; } }, methods:{ handleClick:function(){ this.title = 'how are you' }, handleToggle:function(){ this.show = !this.show }, handleSubmit:function(){ this.items.push(this.inputValue); this.inputValue = ''; } } }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="./vue.js"></script> </head> <body> <div id="root"> <div> <input v-model="inputValue"> <button @click="handleSubmit">提交</button> </div> <ul> <!--<li v-for="(item,index) of items" :key="index">{{item}}</li>--> <todo-item v-for="(item,index) of items" :key="index" :content="item"></todo-item> </ul> </div> <script> Vue.component('todo-item',{ props:['content'], template:'<li>{{content}}</li>' }) new Vue({ el:'#root', data:{ items:[], inputValue:'' }, methods:{ handleSubmit:function () { this.items.push(this.inputValue); this.inputValue = '' } } }) </script> </body> </html>
引入了也会报同样的错误 我再重新发一下问题吧 我的代码整理了一下 谢谢