Vue中v-for更新檢測(cè)的操作方法
口訣：
- 數(shù)組變更方法，就會(huì)導(dǎo)致 v-for 更新，頁(yè)面更新
- 數(shù)組非變更方法：返回新數(shù)組，就不會(huì)導(dǎo)致 v-for 更新，更新值檢測(cè)不到可采用覆蓋或者 this.$set()
數(shù)組變更方法如下：
1. arr.push()從后面添加元素
arr.push(5)
2. arr.pop()從后面刪除元素，只能是一個(gè)
arr.pop()
3. arr.shift()從前面刪除元素，只能刪除一個(gè)
arr.shift()
4. arr.unshift()從前面添加元素，返回值時(shí)添加完后數(shù)組長(zhǎng)度
arr.unshift(8)
5. arr.splice(i,n)刪除從 i (索引值)開(kāi)始之后刪除的 N(刪除的個(gè)數(shù))個(gè)數(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ù)組進(jìn)行排序，返回值排好的數(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()連接兩個(gè)數(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個(gè)</button>
sliceBtn(){
// 2. 數(shù)組slice方法不會(huì)造成v-for更新
// slice不會(huì)改變?cè)紨?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">更新下標(biāo)0的值</button>
sliceBtn(){
// 更新某個(gè)值時(shí)，v-for是檢測(cè)不到的
// this.arr[0] = 1000
// 解決- this.$set()
// 參數(shù)1：更新目標(biāo)結(jié)構(gòu)
// 參數(shù)2：更新位置
// 參數(shù)3：更新值
let newArr = this.arr.slice(0, 3)
this.arr = newArr
},
到此這篇關(guān)于Vue中v-for更新檢測(cè)的文章就介紹到這了,更多相關(guān)vue v-for更新檢測(cè)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue.js實(shí)現(xiàn)左邊導(dǎo)航切換右邊內(nèi)容
這篇文章主要為大家詳細(xì)介紹了vue.js實(shí)現(xiàn)左邊導(dǎo)航切換右邊內(nèi)容，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-10-10
本篇文章主要介紹了vue腳手架中配置Sass的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-01-01
el-tree樹(shù)組件懶加載(后端上千條數(shù)據(jù)前端進(jìn)行處理)
本文主要介紹了el-tree樹(shù)組件懶加載(后端上千條數(shù)據(jù)前端進(jìn)行處理)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-03-03
Vue封裝一個(gè)Tabbar組件?帶組件路由跳轉(zhuǎn)方式
這篇文章主要介紹了Vue封裝一個(gè)Tabbar組件?帶組件路由跳轉(zhuǎn)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
下面小編就為大家?guī)?lái)一篇基于Vue過(guò)渡狀態(tài)實(shí)例講解。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
Element-Plus表格實(shí)現(xiàn)Table自定義合并行數(shù)據(jù)
在開(kāi)發(fā)項(xiàng)目中,我們時(shí)常會(huì)用到表格,許多需求可能會(huì)要求自定義特定的行或列,下面就跟隨小編一起來(lái)學(xué)習(xí)一下在實(shí)際開(kāi)發(fā)中如何實(shí)現(xiàn)這一要求吧2024-12-12
這篇文章主要介紹了vue中methods、mounted等的使用方法解析，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
前端Vue3實(shí)現(xiàn)圖片標(biāo)點(diǎn)兩種方式總結(jié)
這篇文章主要介紹了如何使用Vue3和Ant?Design?Vue4.x實(shí)現(xiàn)圖像標(biāo)點(diǎn)和質(zhì)量檢測(cè)功能,文章詳細(xì)描述了兩種方式,每種方式都包括前端顯示代碼、配置基本數(shù)據(jù)、繪制圓點(diǎn)和序號(hào)以及處理圖片點(diǎn)擊的步驟,需要的朋友可以參考下2024-11-11
vue-cli + sass 的正確打開(kāi)方式圖文詳解
本文通過(guò)圖文并茂的形式給大家介紹了vue-cli + sass 的正確打開(kāi)方式，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧2017-10-10
解讀element ui el-row標(biāo)簽中的gutter用法
這篇文章主要介紹了解讀element ui el-row標(biāo)簽中的gutter用法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08