Vue(day02-15~22: 数组更新检测-变异方法、替换数组)

最新推荐文章于 2022-11-25 20:33:21 发布
最新推荐文章于 2022-11-25 20:33:21 发布
阅读量312 收藏
点赞数
分类专栏： 框架 文章标签： vue 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44764873/article/details/104133717
版权

数组更新检测

  • 变异方法：(修改原有数据)
    • push()
    • pop()
    • shift()
    • unshift()
    • splice()
    • sort()
    • reverse()
  • 替换数组：（生成新的数组）
    • filter()
    • concat()
    • slice(）

变异方法，顾名思义，会改变调用了这些方法的原始数组。相比之下，也有非变异 (non-mutating method) 方法，例如 filter()、concat() 和 slice() 。它们不会改变原始数组，而总是返回一个新数组。当使用非变异方法时，可以用新数组替换旧数组
Vue官网：数组更新检测

//数组响应式变化
//修改响应式数据

Vue.set(vm.list,1,'lemon');
vm.$set(vm.list,2,'lemon');
vm.$set(vm.info,'gender','man');

测试代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<div>
				<span>
					<input type="text" v-model="fname"/>
					<button @click="add">添加</button>
					<button @click="del">删除</button>
					<button @click="change">替换</button>
				</span>
			</div>
			
			<ul>
				<li :key='index' v-for='(item,index) in list'>{{item}}</li>
			</ul>
			
			<div>{{info.name}}</div>
			<div>{{info.age}}</div>
			<div>{{info.gender}}</div>
		</div>
		
		<script type="text/javascript" src="js/vue.min.js" ></script>
		<script type="text/javascript">
			/*
			 * 数组更新检测
			 * 变异方法(修改原有数据)
			 * 替换数组（生成新的数组）
			 */				
			var vm = new Vue({
				el: '#app',
				data: {
					fname: '',
					list: ['apple','orange','banana'],
					info: {
						name: 'lisi',
						age: 12
					}
				},
				methods: {
					add: function(){
						this.list.push(this.fname);
					},
					del: function(){
						this.list.pop();
					},
					change: function(){
						this.list = this.list.slice(0,2);
					}
				}
			});
			//数组响应式变化
			//修改响应式数据
			Vue.set(vm.list,1,'lemon');
			vm.$set(vm.list,2,'lemon');
			vm.$set(vm.info,'gender','man');
		</script>
		</script>
	</body>
</html>

综合案例

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.ddd {
				margin: 15px auto;
				width: 500px;
				text-align: center;
			}
			.grid {
				margin: auto;
				width: 500px;
				text-align: center;
			}
			.grid table {
				width: 100%;
				border-collapse: collapse;
			}
			.grid th,td {
				padding: 10;
				border: 1px dashed orange;
				height: 35px;
				line-height: 35px;
			}
			.grid th {
				background-color: orange;
			}
		</style>
	</head>
	<body>
		<!--常用特性
		过滤器（格式化日期）
		自定义指令（获取表单焦点）
		计算属性（统计图书数量）:this.books.length
		侦听器（验证图书存在性）
		生命周期（图书数据处理）23\24-->
		<div id="app">
			<div class="ddd">
				<h1>图书管理</h1>
				<span>编号：</span>
				<span>
					<input type="text" v-model="id" :disabled="flag"/>
				</span>
				<span>名称：</span>
				<span>
					<input type="text" v-model="name"/>
				</span>
				<button @click="handle">提交</button>
			</div>
			<div class="grid">
				<table>
					<thead>
						<tr>
							<th>编号</th>
							<th>名称</th>
							<th>时间</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody>
						<tr :key='item.id' v-for="item in books">
							<td>{{item.id}}</td>
							<td>{{item.name}}</td>
							<td>{{item.date}}</td>
							<td>
								<!--@click.prevent-->
								<a href="#" @click.prevent='toEdit(item.id)'>修改</a>
								<span>|</span>
								<a href="#" @click.prevent='deleteBook(item.id)'>删除</a>
							</td>
						</tr>
						
					</tbody>
				</table>
			</div>
		</div>
		
		<script type="text/javascript" src="js/vue.min.js" ></script>
		<script type="text/javascript">
			
			var vm = new Vue({
				el: '#app',
				data: {
					flag: false,
					id: '',
					name: '',
					books: [{
						id: 1,
						name: '三国演义',
						date: 2525609975000
					},{
						id: 2,
						name: '水浒传',
						date: 2525609975000
					},{
						id: 3,
						name: '红楼梦',
						date: 2525609975000
					},{
						id: 4,
						name: '西游记',
						date: 2525609975000
					}]
				},
				methods: {
					//实现添加业务逻辑
					handle: function(){
						if(this.flag){ //如果为true,即input被禁用，即进行编辑操作
							//编辑操作
							//就是跟胡当前的ID去更新数组对应的数据
							this.books.some((item) => { // =>指上级作用域（父）
								if(item.id == this.id){ //如果用function,this指window
									item.name = this.name;
									//完成更新操作后，需要终止循环
									return true;
								}
							});
							this.flag = false;
						}else{
							//添加图书
						    //空对象
							var book = {};
							//添加属性
							book.id = this.id;
							book.name = this.name;
							book.date = '';
							//把对象放数组里
							this.books.push(book);
							//清空表单
							this.id = '';
							this.name = '';
						}
						this.id = '';
						this.name = '';
					},
					toEdit: function(id){
						//禁止修改ID
						this.flag = true;
						console.log(id);
						//根据ID查询出编辑的数据
						var book = this.books.filter(function(item){
							return item.id == id;
						});
						console.log(book);
						//修改信息填充到表单
						this.id = book[0].id;
						this.name = book[0].name;
					},
					deleteBook: function(id){
						//删除图书
						//根据ID从数组中查找元素的索引
						var index = this.books.findIndex(function(item){
							return item.id == id;
						});
						//根据索引删除数组元素
						this.books.splice(index,1);
						//--------------------------------
//						方法2:filter (替换数组)
//						this.books = this.books.filter(function(item){
//							return item.id != id;
//						});
					}
				}
			});
		</script>
	</body>
</html>
Lo、
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
数组变异方法_实例方法篇数据相关的方法
weixin_28835583的博客
01-08 232
0. 前言与数据相关的实例方法有3个，分别是vm.$set、vm.$delete和vm.$watch。它们是在stateMixin函数中挂载到Vue原型上的，代码如下：import {set,del} from '../observer/index'export function stateMixin (Vue) { Vue.prototype.$set = set Vue....
数组变异方法(pop,push,shift,unshift,splice,sort,reverse)与替换数组(filter,concat,slice)
小阿兜的博客
06-11 794
数组变异方法 在 Vue 中，直接修改对象属性的值无法触发响应式。当你直接修改了对象属性的值，你会发现，只有数据改了，但是页面内容并没有改变 变异数组方法即保持数组方法原有功能不变的前提下对其进行功能拓展 push() 往数组最后面添加一个元素，成功返回当前数组的长度 pop() 删除数组的最后一个元素，成功返回删除元素的值 shift() 删除数组的第一个元素，成功返回删除元素的值 unshift() 往数组最前面添加一个元素，成功返回当前数组的长度 splice() 有三
案例：图书管理——补充知识（数组相关API）||补充知识（数组响应式变化）
qq_39368007的博客
04-09 143
案例：图书管理 Vue数组操作 1、变异方法：会影响数组的原始数据的变化。 2、替换数组：不会影响原始的数组数据，而是形成一个新的数组。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title...
数组变异方法和非变异方法的总结
MASK_life的博客
09-10 1358
区别： 1.操作数组的方法中，分为变异方法和非变异方法。 2.其中，变异方法意味着会改变原数组，而非变异方法则只会返回一个新数组，不会修改原始数组 数组变异方法： push() //数组尾部追加一个元素 pop()　　//数组尾部弹出一个元素 shift() //数组头部弹出一个元素 unshift() //数组头部插入一个元素 splice() //删除或替换某一个元素 sort() //按照特定的规则排序（数字根据从小到大排序，字符串根据unicode位点排序） reverse() /
检测数组的4种方法
李天下
09-30 4652
检测数据类型的方法请看本人的另一篇博客 https://blog.csdn.net/xuehangongzi/article/details/82907915 下面主要介绍检测数组的（其中有三个方法和检测数据类型相同） 1、instanceof instanceof 方法主要是检测变量的原型链是否指向Array构造函数的prototype原型上。 var arr = [4,67,23]; arr ...
vue-form-json:通过数组验证生成Vue表单
04-29
vue-form-json验证生成Vue表单所有字段都是必填字段，默认情况下输入文本。 提交后，将在$ root上发出带有formName和所有值的事件“ formSubmitted”。特征从数组生成表单（formFields属性） 默认情况下，布尔玛类...
vfg-field-array:一个vue-form-generator字段来处理数组
05-12
一个vue-form-generator字段来处理数组 使用。 例子 简单数组 { model : { array : [ "item1" , "item2" , "item3" ] } , schema : { fields : [ { type : "array" , label : "Array field" , model : ...
Vue指令v-for遍历输出JavaScript数组及json对象的常见方式小结
10-17
主要介绍了Vue指令v-for遍历输出JavaScript数组及json对象的常见方式,结合实例形式总结分析了vue.js使用v-for指令遍历输出js数组与json对象的常见操作技巧,需要的朋友可以参考下
使用vue中的v-for遍历二维数组的方法
08-27
下面小编就为大家分享一篇使用vue中的v-for遍历二维数组的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
关于数组的一些检测方法和转换
m0_64383315的博客
01-16 192
一. 检测是否为数组： 1.instanceof 数组名 . instanceof Array 2.Array is Array (参数) 二. 返回数组元素索引方法 1.indexof (数组元素，[起始的位置]) 它只能返回到第一个满足元素的索引号；从左往右查询； 若找不到该元素，则返回-1； 2.lastindexof(数组元素，[起始的位置]) 它只能返回到第一个满足元素的索引号；从右往左查询； 若找不到该元素，则返回-1； 三.数组与字符串的转换 数组转化为字符串 1.t
Vue中的数组变异的方法 （数组更新检测）
weixin_43353869的博客
05-12 1392
Vue 包含一组观察数组的变异方法，它们将会触发视图更新 ​ push()添加在末尾一个元素，返回值是修改后数组的长度 ​ unshift添加在首未尾部,返回的是修改后的数组的长度 ​ pop()删除末尾的元素,返回值是删除的元素 ​ shift()前面删除的元素,返回值是删除的元素 ​ splice() 删除原数组的一部分成员，并可以在被删除的位置添加入新的数组成员 数组的剪切 删除 插入 ​
操作数组的变异方法和非变异方法
aliven1的博客
01-30 4667
变异方法 (mutation method)，顾名思义，会改变被这些方法调用的原始数组 push()pop()shift()unshift()splice()sort()reverse() 也有非变异 (non-mutating method) 方法，例如：filter(),concat()和slice()。这些不会改变原始数组，但总是返回一个新数组。当使用非变异方法时
JavaScript 数组方法
火星基地
12-09 246
1. 数组变异方法 变异数组方法即保持数组方法原有功能不变的前提下对其进行功能拓展 push() 往数组最后面添加一个元素，成功返回当前数组的长度 pop() 删除数组的最后一个元素，成功返回删除元素的值 shift() 删除数组的第一个元素，成功返回删除元素的值 unshift() 往数组最前面添加一个元素，成功返回当前数组的长度 splice() 有三个参数，第一个是想要删除的元素的下标（必选），第二个是想要删除的个数（必选），第三个是删除 后想要在原位置替换的值 s
Vue监测数据改变原理
嘤嘤鸭的博客
10-19 1350
Vue监测数据改变原理
Vue 如何检测数组变化
z459148345的博客
02-23 811
数组考虑性能原因没有用 defineProperty 对数组的每一项进行拦截，而是选择对 7 种数组（push,shift,pop,splice,unshift,sort,reverse）方法进行重写 // 先保留数组原型 const arrayProto = Array.prototype; // 然后将arrayMethods继承自数组原型 // 这里是面向切片编程思想（AOP）--不破坏封装的前提下，动态的扩展功能 export const arrayMethods = Object.create(a
vue中如何检测数组变化？
longzorg_cn的博客
11-25 373
数组考虑性能原因没有用defineProperty对数组的每一项进行拦截，而是选择重写数组 方法以进行重写。当数组调用到这 7 个方法的时候，执行 ob.dep.notify() 进行派发通知 Watcher 更新；需要通过以下7种变异方法修改数组才会触发数组对应的wacther进行更新。重写数组方法：push/pop/shift/unshift/splice/reverse/sort。ob.dep.notify() // 调用方法时更新视图；// 取出原型方法；// 拷贝原型方法；// 重写数组方法；
前端笔记Vue项目day2(五）
czbkzmj的博客
09-05 157
数组变异方法 在 Vue 中，直接修改对象属性的值无法触发响应式。当你直接修改了对象属性的值，你会发现，只有数据改了，但是页面内容并没有改变 变异数组方法即保持数组方法原有功能不变的前提下对其进行功能拓展 [td] push() 往数组最后面添加一个元素，成功返回当前数组的长度 pop() 删除数组的最后一个元素，成功返回删除元...
vue之v-for列表循环，数组更新检测的变异方法详解
wfly blog
10-17 662
1.v-for遍历循环对象与数组 2.vue数组更新检测变异方法举例 <template> <div class="jz"> <div> <h2>遍历数组</h2> <ul> <li style="font-si...
Vue爬坑日记，数组数据的更新检测
热门推荐
qq_37285177的博客
12-30 1万+
最近在项目中，遇到一个问题，VueJS在递归组件时候，更改数组数据中的值，列表不进行重新渲染，查文档只解决了一部分，网上也没有相关的解决方法，在此做一个总结。首先贴两段demo代码 第一段app.vue<template> <div class="tree-menu"> <ul v-for="item in theModel"> <my-tree :model="item"
vue-seamless-scroll将数组分行展示
最新发布
11-02
要将数组分行展示，你可以使用Vue.js的v-for指令和CSS样式来实现。首先，你需要在模板中使用v-for指令来遍历数组，并将每个元素渲染为一个列表项。然后，你可以使用CSS样式来设置每个列表项的宽度和高度，以及每行的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值