<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="root">
<div>
<input type="text" v-model="inputValue">
<button @click="handleSubmit">提交</button>
</div>
<ul>
<todo-item
v-for="(item,index) of list"
:key="index"
:content="item"
:inde="index"
@delete="handleDlete"
>
</todo-itemdo>
</ul>
</div>
<script>
Vue.component("todo-item",{
props:["content","index"],
template:"<li @click="handleClick">{{content}}</li>",
methods:{
handleClick:function(){
this.$emit("delete",this.index)
}
}
})
new Vue({
el:"#root",
data:{
inputValue:"",
list:[]
},
methods:{
handleSubmit:function(){
this.list.push(this.inputValue)
this.inputValue=""
},
handleDlete:function(index){
this.list.splice(index,1)
}
}
})
</script>
</body>
</html>
template:"<li @click="handleClick">{{content}}</li>" 将其中一对双引号改成单引号试试，可能是编译器混淆了