Vue实现列表动态添加和删除的两种方法小结

下面将介绍两种方式实现动态添加和删除列表

1.不使用组件

！DOCTYPE html html hearteta charset=' utf-8 ' title vue测试实例- vue实现列表增加和删除/title脚本src=' http :https://cdn。bootscs。com/vue/2。2 .2/vue。量滴js '/script/headdydiv id=' app ' input v-model=' new dtext ' placeholder='请输入要添加的内容/button @click='addNewList '添加/buttonulli v-for='(列表，索引)在列表“v-bind :键=”列表。id“{ list。title } }按钮v-: click=' list。拼接(索引，1)删除/button/li/ul/div脚本var vm=new Vue({ el: '#app '，data: { newAddText: ' ')，list :[{ id :1，title: '手机号码}，{id:2，title:'qq号}，{id:3，title: '姓名}，]，nextTodoId: 4 }，方法： { add newlist : function(){ this。名单。推送({ id : this。下一个标题，标题：这个。newadtext })这一点。new dtext=" } } } })/脚本/正文/html初始界面：

添加一个列表：

删除一个列表：

2.使用组件方法

！DOCTYPE html html hearteta charset=' utf-8 ' title vue测试实例- vue实现列表增加和删除/title脚本src=' http :https://cdn。bootscs。com/vue/2。2 .2/vue。量滴js '/script/headdydiv id=' app ' input v-model=' new dtext ' placeholder='请输入要添加的内容/button @click='addNewList '添加/button ulli是=' list-item ' v-for='(列表，索引)在列表“v-bind :键=”列表。id ' v-bind : title='列表。title ' v-: remove='列表。拼接(索引，1)'/Li/ul/div scriptvue。组件(' list-item '，{ template : ' \ Li \ { { title } } \ button v-: click=' $ emit(\ ' remove删除/button\ /li\ '，prop s :[' title ']})var VM=new Vue({ El : ' # app '，data: { newAddText: ' '，list :[{ id :1，title: '手机号码}，{id:2，title:'qq号}，{id:3，title: '姓名}，]，nextTodoId: 4 }，方法： { add newlist : function(){ this。名单。推送({ id : this。下一天，标题：这个。newadtext })这一点。new dtext=" } } } })/脚本/正文/html效果跟上面的一样的！

以上这篇某视频剪辑软件实现列表动态添加和删除的两种方法小结就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。