口诀:
- 数组变更方法,就会导致 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 },
到此这篇关于Vue中v-for更新检测的文章就介绍到这了,更多相关vue v-for更新检测内容请搜索华域联盟以前的文章或继续浏览下面的相关文章希望大家以后多多支持华域联盟!
您可能感兴趣的文章:
- 详解vue中v-for的key唯一性
- 详解为什么Vue中的v-if和v-for不建议一起用
- vue v-for 点击当前行,获取当前行数据及event当前事件对象的操作
- Vue v-for中的 input 或 select的值发生改变时触发事件操作
- vue v-for出来的列表,点击某个li使得当前被点击的li字体变红操作
- vue 取出v-for循环中的index值实例
本文由 华域联盟 原创撰写:华域联盟 » Vue中v-for更新检测的操作方法
转载请保留出处和原文链接:https://www.cnhackhy.com/83649.htm