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

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

创新互联网站建设提供从项目策划、软件开发，软件安全维护、网站优化(SEO)、网站分析、效果评估等整套的建站服务，主营业务为成都网站设计、网站制作，成都App制作以传统方式定制建设网站，并提供域名空间备案等一条龙服务，秉承以专业、用心的态度为用户提供真诚的服务。创新互联深信只要达到每一位用户的要求，就会得到认可，从而选择与我们长期合作。这样，我们也可以走得更远！

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>

初始界面：

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

添加一个列表：

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

删除一个列表：

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

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实现列表动态添加和删除的两种方法小结
网页URL：https://www.cdcxhl.com/article8/gghhip.html

成都网站建设公司_创新互联，为您提供定制开发、企业网站制作、做网站、服务器托管、网站营销、软件开发

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容