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


Posted in Javascript onSeptember 07, 2018

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

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 实现列表动态添加和删除的两种方法小结就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
通过MSXML2自动获取QQ个人头像及在线情况(给初学者)
Jan 22 Javascript
ASP.NET jQuery 实例16 通过控件CustomValidator验证RadioButtonList
Feb 03 Javascript
jquery 自定义容器下雨效果可将下雨图标改为其他
Apr 23 Javascript
JavaScript中的setUTCDate()方法使用详解
Jun 11 Javascript
javascript 小数乘法结果错误的处理方法
Jul 28 Javascript
js实现为a标签添加事件的方法(使用闭包循环)
Aug 02 Javascript
Vue form 表单提交+ajax异步请求+分页效果
Apr 22 Javascript
基于 jQuery 实现键盘事件监听控件
Apr 04 jQuery
JS学习笔记之原型链和利用原型实现继承详解
May 29 Javascript
selenium 反爬虫之跳过淘宝滑块验证功能的实现代码
Aug 27 Javascript
vue实现点击出现操作弹出框的示例
Nov 05 Javascript
利用JavaScript模拟京东按键输入功能
Dec 01 Javascript
koa-router源码学习小结
Sep 07 #Javascript
Vue.js实现表格渲染的方法
Sep 07 #Javascript
vue基于element的区间选择组件
Sep 07 #Javascript
vue-cli监听组件加载完成的方法
Sep 07 #Javascript
原生JS实现DOM加载完成马上执行JS代码的方法
Sep 07 #Javascript
vue加载完成后的回调函数方法
Sep 07 #Javascript
使用vue-router与v-if实现tab切换遇到的问题及解决方法
Sep 07 #Javascript
You might like
改德生G88 - 加装等响度低音提升电路
2021/03/02 无线电
Laravel实现构造函数自动依赖注入的方法
2016/03/16 PHP
php解决约瑟夫环算法实例分析
2019/09/30 PHP
JS中字符问题(二进制/十进制/十六进制及ASCII码之间的转换)
2008/11/03 Javascript
发布一个基于javascript的动画类 Fx.js
2010/11/05 Javascript
javascript完美拖拽的实现方法
2013/09/29 Javascript
jquery实现手机发送验证码的倒计时代码
2014/02/12 Javascript
Javascript+CSS实现影像卷帘效果思路及代码
2014/10/20 Javascript
javascript实现实时输出当前的时间
2015/04/27 Javascript
基于jQuery滑动杆实现购买日期选择效果
2015/09/15 Javascript
详解JavaScript数组的操作大全
2015/10/19 Javascript
JavaScript常用本地对象小结
2016/03/28 Javascript
JavaScript生成带有缩进的表格代码
2016/06/15 Javascript
JS跨域请求外部服务器的资源
2017/02/06 Javascript
jQuery制作input提示内容(兼容IE8以上)
2017/07/05 jQuery
javascript实现自由编辑图片代码详解
2019/06/21 Javascript
什么时候不能在 Node.js 中使用 Lock Files
2019/06/24 Javascript
[00:59]PWL开团时刻DAY7——我在赶
2020/11/06 DOTA
python制作企业邮箱的爆破脚本
2016/10/05 Python
Python编程之字符串模板(Template)用法实例分析
2017/07/22 Python
Python编程django实现同一个ip十分钟内只能注册一次
2017/11/03 Python
Python数据结构之哈夫曼树定义与使用方法示例
2018/04/22 Python
Python如何批量获取文件夹的大小并保存
2020/03/31 Python
Python3实现英文字母转换哥特式字体实例代码
2020/09/01 Python
实现CSS3中的border-radius(边框圆角)示例代码
2013/07/19 HTML / CSS
捷克浴室和厨房设备购物网站:SIKO
2018/08/11 全球购物
个人存款证明书
2014/10/18 职场文书
麦田里的守望者读书笔记
2015/06/30 职场文书
结婚主持人致辞
2015/07/28 职场文书
会议承办单位欢迎词
2015/09/30 职场文书
七年级作文之《我和我的祖国》观后感作文
2019/10/18 职场文书
使用vue-element-admin框架从后端动态获取菜单功能的实现
2021/04/29 Vue.js
pytorch常用数据类型所占字节数对照表一览
2021/05/17 Python
Python 中的 copy()和deepcopy()
2021/11/07 Python
SQL基础查询和LINQ集成化查询
2022/01/18 MySQL
MySQL脏读,幻读和不可重复读
2022/05/11 MySQL