當前位置：首頁 > 前端技术 > vue >内容正文

vue

Vue v-for使用详解

發布時間：2023/12/31 vue 28 豆豆

生活随笔收集整理的這篇文章主要介紹了 Vue v-for使用详解小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

Vue指令之v-for和key屬性

1.迭代數組

2.迭代對象中的屬性

<div v-for="(val, key, i) in userInfo">{{val}} --- {{key}} --- {{i}}</div>

3.迭代數字

4.循環普通數組

5.循環對象數組

6.循環對象

7.迭代數字

2.2.0+ 的版本里，當在組件中使用 v-for 時，key 現在是必須的。

當 Vue.js 用 v-for 正在更新已渲染過的元素列表時，它默認用 “就地復用” 策略。如果數據項的順序被改變，Vue將不是移動 DOM 元素來匹配數據項的順序，而是簡單復用此處每個元素，并且確保它在特定索引下顯示已被渲染過的每個元素。
為了給 Vue 一個提示，以便它能跟蹤每個節點的身份，從而重用和重新排序現有元素，你需要為每項提供一個唯一 key 屬性。
完整代碼：

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="./lib/vue-2.4.0.js"></script> </head><body><div id="app"><div><label>Id:<input type="text" v-model="id"></label><label>Name:<input type="text" v-model="name"></label><input type="button" value="添加" @click="add"></div><p v-for="item in list" :key="item.id"><input type="checkbox">{{item.id}} --- {{item.name}}</p></div><script>// 創建 Vue 實例，得到 ViewModelvar vm = new Vue({el: '#app',data: {id: '',name: '',list: [{ id: 1, name: '李斯' },{ id: 2, name: '嬴政' },{ id: 3, name: '趙高' },{ id: 4, name: '韓非' },{ id: 5, name: '荀子' }]},methods: {add() { // 添加方法this.list.unshift({ id: this.id, name: this.name })}}});</script> </body></html>

如果不使用key的話

添加新元素進去之后，勾選的對應的是索引號，就會出現bug

但是用key的話，就不會有這樣的bug了，勾選的一樣是荀子

總結

以上是生活随笔為你收集整理的Vue v-for使用详解的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

Vue
详解