通常情況下我們需要將一個數組或者對象循環顯示的時候，就會用到這個列表渲染指令v-for。它的表達式需要和in或者of結合使用。
- 數組渲染
首先我們看一個關於數組渲染的例子，這也是最常見的使用形式：
<template>
<ul>
<li v-for="book in books">{{book.name}}</li>
</ul>
</template>
<script>
export default {
name: "Vfor",
data() {
return{
books: [
{name: '<<Vue 實戰指南>>'},
{name: '<<Java 實戰指南>>'},
{name: '<<C++ 實戰指南>>'}
]
}
}
}
</script>
程序運行結果：
這裏我們解釋一下這段代碼的含義，其中我們定義了一個books的數組用來存放我們的書籍數據，book是我們當前數組元素的別名，循環出的每個li標籤內的元素都可以訪問對應的book數據。
其中上面的in也可以使用of來代替，這一點更符合JavaScript的語法：
<li v-for="book of books">{{book.name}}</li>前一段時間我剛接觸vue的時候，就拿上面的例子說，我就想給每個列表元素的前面加上各自的索引，其實在vue中我們可以爲我們的表達式添加一個可選參數作爲當前項的索引，如下：
<li v-for="(book,index) of books">{{index}}---{{book.name}}</li>效果圖：
這裏順便說一下，在vue1.x的版本中可以直接使用$index，在vue2.x的版本中廢棄了這一用法。
- 對象渲染
和數組渲染的寫法有細微的差異，我們通過實例代碼來學習：
<template>
<ul>
<li v-for="(value,key,index) in book">{{index}}--{{key}}:{{value}}</li>
</ul>
</template>
<script>
export default {
name: "Vfor",
data() {
return {
book: {
name: 'Vue 實戰指南',
author: '尤雨溪',
publish_date: '2017-10-1'
}
}
}
}
</script>
這裏我們定義了一個book對象，然後在列表中渲染。
在這個(value,key,index) 表達式中，key和index是可選參數，其中key是對象屬性的名稱，index是索引。
運行效果：
另外有個實用的小用法是利用v-for來迭代整數，例如：
<li v-for="n in 10">{{n}}</li>這裏我們是顯示了1-10的整數：
在這裏我們說明一下關於數組數據的更新需要注意的兩點：
- 通過索引直接設置項，vue不能檢測到，不會更新視圖
this.books[0] = {name: this.modify_name}- 通過修改數組長度，vue不能檢測到，不會更新視圖
this.books.length = 1對於第一種情況，我們可以有針對性的進行修改，還是上面的例子我們可以修改對應元素的相關屬性來達到更新視圖的目的：
這裏我把代碼重新貼一次，方便大家查看：
<template>
<div>
<div>
<input v-model="modify_name">
<button @click="modify">確認修改</button>
</div>
<ul>
<li v-for="(book,index) of books">{{index}}---{{book.name}}</li>
</ul>
</div>
</template>
<script>
export default {
name: "Vfor",
data() {
return {
books: [
{name: '<<Vue 實戰指南>>'},
{name: '<<Java 實戰指南>>'},
{name: '<<C++ 實戰指南>>'}
],
modify_name: ''
}
},
methods: {
modify: function () {
this.books[0].name = this.modify_name
}
}
}
</script>我們增加了一個輸入框和一個按鈕，點擊按鈕我們會修改列表的第一項的內容，運行效果：
輸入新的名稱，然後點擊修改：
下面列出了通過代碼使用相關方法操作數組時候會觸發視圖更新的方法：
push()
pop()
shift()
unshift()
splice()
sort()
reverse()使用上面的方法會改變原始數組的數據，下面幾個方法則不會改變原始數組：
filter()
concat()
slice()它們會返回一個新的數組。
下面我們還是修改上面的例子，實現對列表進行簡單的過濾和者排序：
<template>
<div>
<p>原始數組：</p>
<ul>
<li v-for="book in books">{{book.name}}</li>
</ul>
<p>排序後的數組：</p>
<ul>
<li v-for="book in sortBooks">{{book.name}}</li>
</ul>
<p>過濾後的數組：</p>
<ul>
<li v-for="book in filterBooks">{{book.name}}</li>
</ul>
</div>
</template>
<script>
export default {
name: "Vfor",
data() {
return {
books: [
{name: '<<Vue 實戰指南>>'},
{name: '<<Java 實戰指南>>'},
{name: '<<Java 實戰指南2>>'},
{name: '<<C++ 實戰指南>>'},
{name: '<<C++ 實戰指南2>>'}
],
search_name: ''
}
},
computed: {
filterBooks: function () {
return this.books.filter(function (book) {
return book.name.match(/Java/)
})
},
sortBooks: function () {
return this.sortKey(this.books,'name')
}
},
methods: {
sortKey: function (array,key) {
return array.sort(function (a,b) {
var book1 = a[key]
var book2 = b[key]
return book1.length < book2.length
})
}
}
}
</script>
<style scoped>
</style>
運行效果：
代碼比較簡單，我們就不細說了。