Vue 实现列表动态添加和删除的两种方法小结
更新时间：2018年09月07日 10:10:46 作者：程序媛-jjl
今天小编就为大家分享一篇Vue 实现列表动态添加和删除的两种方法小结，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
下面将介绍两种方式实现动态添加和删除列表
1.不使用组件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - vue实现列表增加和删除</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<input v-model="newAddText" placeholder="请输入要添加的内容" />
<button @click='addNewList'>添加</button>
<ul>
<li v-for='(list,index) in lists' v-bind:key='list.id'>
{{list.title}} <button v-on:click='lists.splice(index, 1)'>删除</button>
</li>
</ul>
</div>
<script>
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=''
}
}
})
</script>
</body>
</html>
初始界面：
添加一个列表：
删除一个列表：
2.使用组件方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - vue实现列表增加和删除</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<input v-model="newAddText" placeholder="请输入要添加的内容" />
<button @click='addNewList'>添加</button>
<ul>
<li is='list-item' v-for='(list,index) in lists' v-bind:key='list.id'
v-bind:title='list.title' v-on:remove='lists.splice(index,1)'>
</li>
</ul>
</div>
<script>
Vue.component('list-item', {
template: '\
<li>\
{{ title }}\
<button v-on:click="$emit(\'remove\')">删除</button>\
</li>\
',
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=''
}
}
})
</script>
</body>
</html>
效果跟上面的一样的！
以上这篇Vue 实现列表动态添加和删除的两种方法小结就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要给大家介绍了关于Vue中this.$emit()方法的相关资料,this.$emit()是 Vue.js 中一个很有用的方法,可以帮助子组件向父组件传递事件,需要的朋友可以参考下2023-09-09
今天小编就为大家分享一篇解决vue-cli 打包后自定义动画未执行的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
在我们安装完Node.js之后,需要使用npm命令来安装一些工具,下面这篇文章主要给大家介绍了关于npm install时卡住不动的五种解决方法,需要的朋友可以参考下2023-06-06
这篇文章主要为大家分享了一款MVVM组件，构建自己的Vue组件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-03-03
这篇文章主要介绍了如何解决公共组件父子组件依赖调用和子组件校验父组件条件的问题，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-10-10
vue-cli如何关闭Uncaught error的全屏提示
这篇文章主要介绍了vue-cli如何关闭Uncaught error的全屏提示问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-04-04
这篇文章主要介绍了关于Ant-Design-Vue快速上手指南+排坑，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-06-06
这篇文章主要为大家介绍了vue面试observable原理详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-12-12
computed作为计算属性其作用是描述响应式数据的复杂逻辑计算，当所依赖的响应式数据发生改变时计算属性会重新计算，更新逻辑计算的结果，这篇文章主要介绍了Vue.js中的computed的功能设计,需要的朋友可以参考下2023-06-06
这篇文章主要为大家详细介绍了vue集成百度UEditor富文本编辑器的使用教程，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-09-09
最新评论