今天要寫的是Vue很香的一個指令v-for，這個指令在結構中實現循環，基于數據多次渲染元素，在減少代碼量的情況下，又使得邏輯關系一目了然，很奈斯。不多說啦，就開始吧。

---

目錄

1.使用方法

1）v-for中使用數組

2）v-for中使用對象

3）v-for中適用數字

4）v-for中使用字符串

2. key

---

1.使用方法

v-for指令中可以使用數組、對象、數字、以及字符串，下面我們一一舉例，首先把vue.js文件引進來

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

1）v-for中使用數組

語法：(item, index) in items?

其中 items?為源數據數組，item 數組元素別名，index 為索引，可填可不填，舉個栗子

<ul id="app"><li v-for='(person, index) in persons'>{{index}}——{{person}}</li> </ul> const vm = new Vue({el: '#app',data: {persons: ["IronMan", 'CaptainAmerican', 'Holk', 'Thor']} });

【結果】頁面渲染如下

?【注】可以利用 of 替代 in 作為分隔符，因為它更接近迭代器的語法，如下

<li v-for='(person, index) of persons'>{{index}}——{{person}}</li>

2）v-for中使用對象

語法：(value, key, index) in Object

其中 value 是對象值；key 為鍵名，可選填；index 還是索引，也可選填，舉個栗子

<ul id="app"><li v-for="(value, key, index) in persons">{{ index }}——{{ key }}_{{ value }}</li> </ul> const vm = new Vue({el: '#app',data: {persons: {IronMan: 'Tony Stack', CaptainAmerican: 'Steven Steve Rogers',Holk: 'Robert Bruce Banner',}} });

【結果】

3）v-for中適用數字

語法：n in num

n 為從1開始的數字，栗子如下

<ul id="app"><li v-for="n in num">{{ n }}</li> </ul> const vm = new Vue({el: '#app',data: {num: 5} });

【結果】

4）v-for中使用字符串

語法：str in string

<ul id="app"><li v-for="str in string">{{ str }}</li> </ul> const vm = new Vue({el: '#app',data: {string: 'Good Luck'} });

【結果】

【注】可以利用template元素循環渲染一段包含多個元素的內容

<ul id="app"><template v-for="(hero,key) in heros"><li>{{ key }}</li><li>{{ hero.name }}</li><li>{{ hero.player }}</li></template> </ul> const vm = new Vue({el: '#app',data: {heros: {IronMan:{name: 'Tony Stack',player: 'Robert Downey Jr.'},Holk: {name: 'Robert Bruce Banner',player: 'Mark Alan Ruffalo'}}} });

【結果】

2. key

Vue 更新使用 v-for 渲染的元素列表時，它默認使用“就地更新”的策略。如果數據項的順序被改變，Vue 將不會移動 DOM 元素來匹配數據項的順序，而是簡單復用此處每個元素，如下

<ul id="app"><li v-for="(person,index) in persons">{{ person }}<input type="text"/><button @click="handleClick(index)">down</button></li> </ul> const vm = new Vue({el: '#app',data: {persons: ["IronMan", 'CaptainAmerican', 'Holk', 'Thor']},methods: {handleClick(index) {const deleteItem = this.persons.splice(index, 1);this.persons.splice(index + 1, 0, ...deleteItem)}} });

【結果】

在“就地復用”策略中，點擊按鈕，輸入框不隨文本一起下移，是因為輸入框沒有與數據綁定，所以 vue,js 默認使用已經渲染的 dom，然而文本是與數據綁定的，所以文本被重新渲染。這種處理方式在 vue 中是默認的列表渲染策略，因為高效。

這個默認的模式是高效的，但是在更多的時候，我們并不需要這樣的處理方式，所以，為了給vue一個提示，以便它能跟蹤每個節點的身份，從而重用和重新排序現有元素，我們需要為每項提供一個唯一key特性，vue會基于key的變化重新排列元素順序，并且會移除key不存在的元素，栗子如下：

<ul id="app"><li v-for="(person,index) in persons" :key='person'>{{ person }}<input type="text"/><button @click="handleClick(index)">down</button></li> </ul>

【結果】?

【注】

（1）不建議將數組的索引作為key值，因為如果使用數組的索引作為key值時，頁面重新渲染后，元素的key值會重新被賦值。

（2）key值是唯一的，跟后臺協作時，傳回來的每一條數據都有一個id值，可以用作key值

總結

以上是生活随笔為你收集整理的Vue指令篇_v-for_列表渲染的全部內容，希望文章能夠幫你解決所遇到的問題。

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