VUE中v-for更新检测
2024-09-21 05:41:08
口诀：
- 数组变更方法，就会导致 v-for 更新，页面更新
- 数组非变更方法：返回新数组，就不会导致 v-for 更新，更新值检测不到可采用覆盖或者 this.$set()
数组变更方法如下：
1. arr.push()从后面添加元素
arr.push(5)
2. arr.pop()从后面删除元素，只能是一个
arr.pop()
3. arr.shift()从前面删除元素，只能删除一个
arr.shift()
4. arr.unshift()从前面添加元素，返回值时添加完后数组长度
arr.unshift(8)
5. arr.splice(i,n)删除从 i (索引值)开始之后删除的 N(删除的个数)个数
let arr = [1,2,3,4,5]
console.log(arr.splice(2,2)) //[3,4]
console.log(arr) // [1,2,5]
6. arr.sort()将数组进行排序，返回值排好的数组
let arr = [2,10,6,1,4,22,3]
console.log(arr.sort()) // [1, 10, 2, 22, 3, 4, 6]
let arr1 = arr.sort((a, b) =>a - b)
console.log(arr1) // [1, 2, 3, 4, 6, 10, 22]
let arr2 = arr.sort((a, b) =>b-a)
console.log(arr2) // [22, 10, 6, 4, 3, 2, 1]
7. arr.reverse() 将数组反转
let arr = [1,2,3,4,5]
console.log(arr.reverse()) // [5,4,3,2,1]
console.log(arr) // [5,4,3,2,1]
数组非变更方法如下：
1. arr.concat()连接两个数组
let arr = [1,2,3,4,5]
console.log(arr.concat([1,2])) // [1,2,3,4,5,1,2]
console.log(arr) // [1,2,3,4,5]
2. arr.slice(start,end)切去索引 start 到 end 索引值，不包含 start 索引值
let arr = [1,2,3,4,5]
console.log(arr.slice(1,3)) // [2,3]
覆盖方法
<li v-for="(val, index) in arr" :key="index">
{{ val }}
</li>
<button @click="sliceBtn">截取前3个</button>
sliceBtn(){
// 2. 数组slice方法不会造成v-for更新
// slice不会改变原始数组
// this.arr.slice(0, 3)
// 解决v-for更新 - 覆盖原始数组
let newArr = this.arr.slice(0, 3)
this.arr = newArr
},
this.$set()方法
<li v-for="(val, index) in arr" :key="index">
{{ val }}
</li>
<button @click="sliceBtn">更新下标0的值</button>
sliceBtn(){
// 更新某个值时，v-for是检测不到的
// this.arr[0] = 1000
// 解决- this.$set()
// 参数1：更新目标结构
// 参数2：更新位置
// 参数3：更新值
let newArr = this.arr.slice(0, 3)
this.arr = newArr
},
最新文章
- Go to the first line OR the last line of the file
- Ruby调用Excel相关的函数
- jquery 常用函数
- Linux-lsof命令
- 关于在 loadView 中改变状态栏的可视性
- mongodb and .net
- 关于ajax直接提交表单jQuery .validator验证不起作用问题
- 多线程之线程通信条件Condition
- php安装详解
- json串转化成xml文件、xml文件转换成json串
- 【loj6029】「雅礼集训 2017 Day1」市场 线段树+均摊分析
- 【LOJ】#2541. 「PKUWC2018」猎人杀
- scrum立会报告+燃尽图（第三周第三次）
- Hadoop在线分析处理(OLAP)
- Python为什么会打印两个\
- phpcmsV9搜索分页数量
- 字符串（PHP学习）
- plsql programming 09 数字
- DataGrip 使用--方法-..../
- eclipse中使用自带的git提交项目