<body>
<div id="root">
<div>
<input v-model="inputValue" />
<button @click="Submit">提交</button>
</div>
<ul>
<todo-item
v-for="(item,index) of list"
:key="index"
:content="item"
:index="index"
@delete="handleDelete"
>
</todo-item>
</ul>
</div>
<script>
Vue.component('todo-item',{
props:['content','index'],
template:'<li>{{content}}</li>',
methods:{
handleClick:function(){
this.$emit('delete',this.index)
},
}
})
new Vue({
el:"#root",
data:{
inputValue:'',
list:[],
},
methods:{
Submit:function() {
this.list.push(this.inputValue)
this.inputValue=''
},
handleDelete:function(index){
this.list.splice(index, 1)
}
},
})
</script>
</body>
template:'<li>{{content}}</li>',改为template:"<li @click='handleClick'>{{msg}}</li>"
自问自答，因为上节课没有跟着做，li上面没有绑定click事件