<div id="app">
<input type="text" v-model="inputValue"/>
<button type="button" @click="handleBtnClick">提交</button>
<ul>
<todo-item v-bind:content="item" v-bind:index="index" v-for="(item,index) in list" @delete="handleItemDelete"></todo-item>
<!-- <li v-for="item in list">{{item}}</li> -->
</ul>
</div>
<script>
Vue.component("todoItem",{
props:['content','index'],
template:"<li @click='handleItemClick'>{{content}}</li>",
methods:{
handleItemClick:function(){
this.$emit("delete",this.index);
}
}
})
var app=new Vue({
el:"#app",
data:{
inputValue:'',
list:['第一课内容','第二课内容']
},
methods:{
handleBtnClick:function () {
this.list.push(this.inputValue);
},
handleItemDelete:function (index) {
this.list.splice(index,1);
}
}
})
</script>