Vue实现todolist删除功能

代码如下所示：

<div id="app">
<input v-model="inputValue">
<button @click="handleSumbit">提交</button>
<todo-item v-for="(item,index) of list":key="index":content="item":index="index"
@delete="handleDelete"></todo-item>
</div>

子组件向父组件传递数据使用

this.$emit('delete',this.index)

<script >
Vue.component('todo-item',{
props:["content",'index'],
template:"<li @click='handleSubmit'>{{content}}{{index}}</li>",
methods:{
handleSubmit:function () {
this.$emit('delete',this.index)
}
}
})
new Vue({
el:'#app',
data:{
inputValue:'',
list:[]
},
methods:{
handleSumbit:function () {
this.list.push(this.inputValue);
this.inputValue="";
},
handleDelete:function (index) {
this.list.splice(index,1)
}
}
})
</script>

总结

以上所述是小编给大家介绍的Vue实现todolist删除功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

• vue实现留言板todolist功能
• 详解Vue的computed(计算属性)使用实例之TodoList
• vue2的todolist入门小项目的详细解析
• 基于vuejs实现一个todolist项目
• vue实现todolist单页面应用
• vue实现ToDoList简单实例
• 利用vue写todolist单页应用
• Vue.js实现简单ToDoList 前期准备（一）