<div id="example">
 <p v-for="item in items" track-by="_uid">
 {{item.message}}
 </p>
 <input type="button" value="修改" @click="modify"/>
 <input type="button" value="還原" @click="reduct"/>
</div>
// 初始數(shù)據(jù)
items: [
 { _uid: '111111', message: '111' },
 { _uid: '222222', message: '222' },
 { _uid: '333333', message: '333' },
 { _uid: '444444', message: '444' },
 { _uid: '555555', message: '555' }
]
// 修改成
modify: function () {
 this.items = [
 { _uid: '111111', message: '111' },
 { _uid: '666666', message: '222' },
 { _uid: '333333', message: '3333' },
 { _uid: '888888', message: '4444' },
 { _uid: '999999', message: '5555' }
 ]
}

渲染效果如下圖右(左邊無track-by，右邊有track-by)，_uid和message都不變的情況下，才不被重新渲染，只有第一組符合條件。

2. 使用$index，其它條件同上

<div id="example">
 <p v-for="item in items" track-by="$index">
 {{item.message}}
 </p>
 <input type="button" value="修改" @click="modify"/>
 <input type="button" value="還原" @click="reduct"/>
</div>

渲染效果如下圖右，message的值第一、二條都沒改變，所以一、二都沒有重新渲染。

模板中同時使用message和_uid時，只有兩者都不變的情況下才不重新渲染，如下：

<div id="example">
 <p v-for="item in items" track-by="$index">
 {{item.message}} {{item._uid}}
 </p>
 <input type="button" value="修改" @click="modify"/>
 <input type="button" value="還原" @click="reduct"/>
</div>

本文已被整理到了《Vue.js前端組件學(xué)習(xí)教程》，歡迎大家學(xué)習(xí)閱讀。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vue項目前端部署詳細(xì)步驟(nginx方式)
Nginx(engine x)是一個高性能的HTTP和反向代理web服務(wù)器,是部署前端項目的首選,這篇文章主要給大家介紹了關(guān)于Vue項目前端部署(nginx方式)的相關(guān)資料,需要的朋友可以參考下
2023-09-09
element-UI?el-table樹形數(shù)據(jù)?修改小三角圖標(biāo)方式
這篇文章主要介紹了element-UI?el-table樹形數(shù)據(jù)?修改小三角圖標(biāo)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-07-07
Vue 理解之白話 getter/setter詳解
這篇文章主要介紹了Vue getter setter，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04
使用Vant如何實現(xiàn)數(shù)據(jù)分頁,下拉加載
這篇文章主要介紹了使用Vant實現(xiàn)數(shù)據(jù)分頁及下拉加載方式。具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-06-06
Vue3實現(xiàn)批量異步更新
這篇文章主要為大家詳細(xì)介紹了Vue3批量異步更新是如何實現(xiàn)的，文中的示例代碼簡潔易懂，具有一定的借鑒價值，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2023-08-08
通過GASP讓vue實現(xiàn)動態(tài)效果實例代碼詳解
GASP是一個JavaScript動畫庫，它支持快速開發(fā)高性能的 Web 動畫。GASP 使我們能夠輕松輕松快速的將動畫串在一起，來創(chuàng)造一個高內(nèi)聚的流暢動畫序列。這篇文章主要介紹了通過GASP讓vue實現(xiàn)動態(tài)效果,需要的朋友可以參考下
2019-11-11
vue 實現(xiàn) tomato timer(蕃茄鐘)實例講解
下面小編就為大家?guī)硪黄獀ue 實現(xiàn) tomato timer(蕃茄鐘)實例講解。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-07-07
vue-devtools?開發(fā)工具插件之支持vue3?chrome?瀏覽器插件
這篇文章主要介紹了vue-devtools?開發(fā)工具插件之支持vue3?chrome?瀏覽器插件,用這個版本主要是為了支持vue3?推薦直接下載，文中給大家提供了下載地址，感興趣的朋友跟隨小編一起看看吧
2022-01-01
vue柱狀進度條圖像的完美實現(xiàn)方案
本文是對bar進度條實現(xiàn)的2種方案進行分享，第一種是很簡單，純css的實現(xiàn)，第二種是echart的實現(xiàn)。對vue柱狀進度條圖像的實現(xiàn)方案，感興趣的朋友跟隨小編一起看看吧
2019-08-08
vue滾動tab跟隨切換效果
這篇文章主要為大家詳細(xì)介紹了vue滾動tab跟隨切換效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-07-07