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

1.不使用组件

<!DOCTYPE html>
<html>
<head>
<  charset="utf-8">
< >Vue 测试实例 - vue实现列表增加和删除</ >
<  src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></ >
</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. }} <button v-on:click='lists.splice(index, 1)'>删除</button>
		</li>
	</ul>
</div>
 
< >
 
var vm = new Vue({
 el: '#app',
 data: {
 newAddText:'',
	 lists:[
		 {id:1, :'手机号码'},
		 {id:2, :'qq号'},
		 {id:3, :'姓名'},
	 ],
	 nextTodoId: 4
 },
 methods:{
	 addNewList:function(){
		 this.lists.push({
			 id:this.nextTodoId++,
			  :this.newAddText
		 })
		 this.newAddText=''
	 }
 }	
})
 
</ >
</body>
</html>

初始界面：

添加一个列表：

删除一个列表：

2.使用组件方法

<!DOCTYPE html>
<html>
<head>
<  charset="utf-8">
< >Vue 测试实例 - vue实现列表增加和删除</ >
<  src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></ >
</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: ='list. ' v-on:remove='lists.splice(index,1)'>
		</li>
	</ul>
</div>
 
< >
	Vue.component('list-item', {
 template: '\
 <li>\
 {{   }}\
 <button v-on:click="$emit(\'remove\')">删除</button>\
 </li>\
 ',
 props: [' ']
})
 
var vm = new Vue({
 el: '#app',
 data: {
 newAddText:'',
	 lists:[
		 {id:1, :'手机号码'},
		 {id:2, :'qq号'},
		 {id:3, :'姓名'},
	 ],
	 nextTodoId: 4
 },
 methods:{
	 addNewList:function(){
		 this.lists.push({
			 id:this.nextTodoId++,
			  :this.newAddText
		 })
		 this.newAddText=''
	 }
 }	
})
 
</ >
</body>
</html>

效果跟上面的一样的！

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

继续阅读与本文标签相同的文章

无标签
最新文章 最热文章
收藏 打印

特别推荐 2026年05月18日 星期一

精彩发现

热门标签

阻止表单提交 窗口 关闭浏览器 清除 CDATA css文件 光标位置 坐标 javascrpt !important 超链接 数字

相关文章