<!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>
。。。
我的运行项目看错了 看到了另外一个项目上去
已经找到问题了