Vue实现todolist删除功能
更新时间：2018年06月26日 14:29:00 作者：XiaopengRong
这篇文章主要介绍了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删除功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
这篇文章主要介绍了基于vue3 vue-cli4 线上部署及优化的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-06-06
vue elementui el-form rules动态验证的实例代码详解
在使用elementUI el-form 中，对于业务不同的时候可能会产生不同表单结构，但是都是存在同一个表单控件el-form中。这篇文章主要介绍了vue elementui el-form rules动态验证的实例代码,需要的朋友可以参考下2019-05-05
$router.push()中通过path跳转和通过name跳转区别解析
今天在路由跳转传参时发现params传参接收到的总是为空，才发现通过path和name传参是有区别的，这篇文章主要介绍了$router.push()中通过path跳转和通过name跳转有什么区别,需要的朋友可以参考下2023-11-11
Vue中的Object.defineProperty全面理解
这篇文章主要介绍了Vue中的Object.defineProperty全面理解，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了Vue之父子组件传值，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
这篇文章主要介绍了浅谈 Vue 项目优化的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-12-12
这篇文章主要为大家详细介绍了vue3手动封装弹出框组件message的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
这篇文章主要介绍了关于vue.extend的使用及说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-03-03
vue-music 使用better-scroll遇到轮播图不能自动轮播问题
根据vue-music视频中slider组建的使用，当安装新版本的better-scroll，轮播组件，不能正常轮播。如何解决这个问题呢，下面小编给大家带来了vue-music 使用better-scroll遇到轮播图不能自动轮播问题，感兴趣的朋友一起看看吧2018-12-12
这篇文章主要介绍了ant-design表单处理和常用方法及自定义验证操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
最新评论