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 相关文章推荐
几行代码轻松搞定jquery实现flash8类似的连接效果
May 03 Javascript
js利用与或运算符优先级实现if else条件判断表达式
Apr 15 Javascript
node.js中的url.resolve方法使用说明
Dec 10 Javascript
五种js判断是否为整数类型方式
Dec 03 Javascript
Bootstrap模块dropdown实现下拉框响应
May 22 Javascript
如何使用vuejs实现更好的Form validation?
Apr 07 Javascript
jQuery extend()详解及简单实例
May 06 jQuery
requirejs按需加载angularjs文件实例
Jun 08 Javascript
JS实现上传图片的三种方法并实现预览图片功能
Jul 14 Javascript
Angular2仿照微信UI实现9张图片上传和预览的示例代码
Oct 19 Javascript
VSCode中如何利用d.ts文件进行js智能提示
Apr 13 Javascript
JS实现秒杀倒计时特效
Jan 02 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
ThinkPHP中pathinfo的访问模式、路径访问模式及URL重写总结
2014/08/23 PHP
PHP中的随机性 你觉得自己幸运吗?
2016/01/22 PHP
Docker配置PHP开发环境教程
2016/12/21 PHP
php上传后台无法收到数据解决方法
2019/10/28 PHP
PHP7移除的扩展和SAPI
2021/03/09 PHP
JQuery团队打造的javascript单元测试工具QUnit介绍
2010/02/26 Javascript
当jQuery遭遇CoffeeScript的时候 使用分享
2011/09/17 Javascript
firefox下jquery iframe刷新页面提示会导致重复之前动作
2012/12/17 Javascript
自己用jQuery写了一个图片的马赛克消失效果
2014/05/04 Javascript
浅析javascript的间隔调用和延时调用
2014/11/12 Javascript
提升PHP安全:8个必须修改的PHP默认配置
2014/11/17 Javascript
jQuery操作cookie方法实例教程
2014/11/25 Javascript
javascript随机显示背景图片的方法
2015/06/18 Javascript
移动端横屏的JS代码(beta)
2016/05/16 Javascript
Windows下快速搭建NodeJS本地服务器的步骤
2017/08/09 NodeJs
在vue-cli项目中使用bootstrap的方法示例
2018/04/21 Javascript
Vue 重置组件到初始状态的方法示例
2018/10/10 Javascript
JS正则表达式验证密码强度
2020/03/18 Javascript
在vue中使用jsonp进行跨域请求接口操作
2020/10/29 Javascript
在Python中append以及extend返回None的例子
2019/07/20 Python
TensorFlow基本的常量、变量和运算操作详解
2020/02/03 Python
Python拼接字符串的7种方式详解
2020/03/19 Python
python实现电子词典
2020/03/03 Python
is_file和file_exists效率比较
2021/03/14 PHP
购买瑞典当代设计的腕表和太阳眼镜:TRIWA
2016/10/30 全球购物
马歇尔耳机官网:Marshall Headphones
2020/02/04 全球购物
保加利亚运动鞋购物网站:SneakerStudio.bg
2020/12/23 全球购物
最新远光软件笔试题面试题内容
2013/11/08 面试题
大学生找工作推荐信范文
2013/11/28 职场文书
电子商务个人自荐信
2013/12/12 职场文书
电钳专业个人求职信
2014/01/04 职场文书
优秀员工评语
2014/02/10 职场文书
高三物理教学反思
2016/02/20 职场文书
教你快速开启Apache SkyWalking的自监控
2021/04/25 Servers
Python中OpenCV实现简单车牌字符切割
2021/06/11 Python
Python中的socket网络模块介绍
2022/07/23 Python