console
<div id="app">
<input type="text" v-model="inputValue" /> <input type="button" @click="addTodo" value="确定" />
<ul>
<todo-list
v-for="(item, index) of todoList"
:index = index
:content = item
:key= index
@delete="deleteMe"
></todo-list>
</ul>
</div>
<script>
Vue.component('todo-list',{
props:['content','index'],
template:`
<li @click="this.$emit('delete',this.index)">{{content}}</li>
`
})
new Vue({
el:'#app',
data:{
todoList:['first todo'],
inputValue:""
},
methods:{
addTodo:function(){
if(this.inputValue!=""){
this.todoList.push(this.inputValue);
this.inputValue="";
}
},
deleteMe:function(){
alert(1);
}
}
})
</script>