Vue中v-for更新檢測的操作方法

更新時間：2021年10月21日 08:53:55 作者：25氪

v-for 指令需要使用 item in items 形式的特殊語法，其中 items 是源數(shù)據(jù)數(shù)組，而 item 則是被迭代的數(shù)組元素的別名。今天通過本文給大家介紹Vue中v-for更新檢測的操作方法，感興趣的朋友一起看看吧

口訣：

數(shù)組變更方法，就會導致 v-for 更新，頁面更新
數(shù)組非變更方法：返回新數(shù)組，就不會導致 v-for 更新，更新值檢測不到可采用覆蓋或者 this.$set()

數(shù)組變更方法如下：

1. arr.push()從后面添加元素

arr.push(5)

2. arr.pop()從后面刪除元素，只能是一個

arr.pop()

3. arr.shift()從前面刪除元素，只能刪除一個

arr.shift()

4. arr.unshift()從前面添加元素，返回值時添加完后數(shù)組長度

arr.unshift(8)

5. arr.splice(i,n)刪除從 i (索引值)開始之后刪除的 N(刪除的個數(shù))個數(shù)

let arr = [1,2,3,4,5]
console.log(arr.splice(2,2))     //[3,4]
console.log(arr)    // [1,2,5]

6. arr.sort()將數(shù)組進行排序，返回值排好的數(shù)組

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() 將數(shù)組反轉(zhuǎn)

let arr = [1,2,3,4,5]
console.log(arr.reverse())    // [5,4,3,2,1]
console.log(arr)    // [5,4,3,2,1]

數(shù)組非變更方法如下：

1. arr.concat()連接兩個數(shù)組

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. 數(shù)組slice方法不會造成v-for更新
   // slice不會改變原始數(shù)組
   // this.arr.slice(0, 3)

   // 解決v-for更新 - 覆蓋原始數(shù)組
   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()
   // 參數(shù)1：更新目標結(jié)構(gòu)
   // 參數(shù)2：更新位置
   // 參數(shù)3：更新值
   let newArr = this.arr.slice(0, 3)
   this.arr = newArr
 },

到此這篇關于Vue中v-for更新檢測的文章就介紹到這了,更多相關vue v-for更新檢測內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: