vue中有關v for和key的細節

2021-08-28 21:22:10 字數 475 閱讀 8288

渲染資料時我們可能會用到v-for來遍歷資料,但是key的話有時候是可加可不加,實際上為了規範還是加上比較好,因為可能會遇到如下例子中的問題:

html**:

js**:

效果圖則是這樣的:

這裡輸入id和name後新增是新增在前面的,問題就是,如果h1標籤沒有加key,我先勾上「4-------小黑」,然後這時輸入id和name,新增到了前面,按正常思維來說,「4-------小黑」應該還是被勾選,但是實際上卻是這樣:

不加key的話,id就沒有和對應的標籤綁一起,如果加了key,那麼勾上的就是「4-------小黑」了。

Vue指令v for和key屬性

迭代陣列 迭代物件中的屬性 迭代數字 這是第 個p標籤 2.2.0 的版本裡,當在元件中使用v for 時,key 現在是必須的。當 vue.js 用 v for 正在更新已渲染過的元素列表時,它預設用 就地復用 策略。如果資料項的順序被改變,vue將不是移動 dom 元素來匹配資料項的順序,而是簡...

Vue指令之v for和key屬性 碼蟲

迭代陣列 v for item,i in list 索引 姓名 年齡 li ul 迭代物件中的屬性 v for val,key,i in userinfo div 迭代數字 v for i in 10 這是第 個p標籤p 2.2.0 的版本裡,當在元件中使用v for 時,key 現在是必須的。當 ...

Vue中v for為什麼使 key

我們需要使用key來給每個節點做乙個唯一標識,diff演算法就可以正確的識別此節點,找到正確的位置區插入新的節點。加key主要不是為了效能,主要是為了區分兩個 vnode 節點。比如乙個列表,增加其中一項,如果不加 key 區分,增加後新舊 vnode 對比就會出現 bug。因為列表元素 dom 結...