list vue 添加数据方法_Vue 实现列表动态添加和删除的两种方法小结

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

1.不使用组件

Vue 测试实例 - vue实现列表增加和删除

添加

• {{list.title}} 删除

var vm = new Vue({

el: '#app',

data: {

newAddText:'',

lists:[

{id:1,title:'手机号码'},

{id:2,title:'qq号'},

{id:3,title:'姓名'},

],

nextTodoId: 4

},

methods:{

addNewList:function(){

this.lists.push({

id:this.nextTodoId++,

title:this.newAddText

})

this.newAddText=''

}

}

})

初始界面：

添加一个列表：

删除一个列表：

2.使用组件方法

Vue 测试实例 - vue实现列表增加和删除

添加

• v-bind:title='list.title' v-on:remove='lists.splice(index,1)'>

Vue.component('list-item', {

template: '\

\

{{ title }}\

删除\

\

',

props: ['title']

})

var vm = new Vue({

el: '#app',

data: {

newAddText:'',

lists:[

{id:1,title:'手机号码'},

{id:2,title:'qq号'},

{id:3,title:'姓名'},

],

nextTodoId: 4

},

methods:{

addNewList:function(){

this.lists.push({

id:this.nextTodoId++,

title:this.newAddText

})

this.newAddText=''

}

}

})

效果跟上面的一样的！

以上这篇Vue 实现列表动态添加和删除的两种方法小结就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。