Javascript

VUE中v-for更新检测

本文主要是介绍VUE中v-for更新检测,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
口诀:
  • 数组变更方法,就会导致 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更新检测的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!