迴圈
在模板中可以用v-for指令來迴圈陣列，物件等。
迴圈陣列
我們可以用 v-for 指令基於一個數組來渲染一個列表。v-for 指令需要使用 item in items形式的特殊語法，其中 items 是源資料陣列，而 item 則是被迭代的陣列元素的別名。
<div id="app">
<ul>
<li v-for="item in items">{{item.message}}</li>
</ul>
</div>
<script>
const app = new Vue({
el: "#app",
data: {
items: [
{message: 'Hello'},
{message: 'World'},
]
}
})
</script>
結果：
Hello
World
v-for 還支援一個可選的第二個引數，即當前項的索引。
<div id="app">
<ul>
<li v-for="(item, index) in items">{{index+1}}.{{item.message}}</li>
</ul>
</div>
注意：索引index是放在item之後
結果:
1.Hello
2.World
你也可以用 of 替代 in 作為分隔符，因為它更接近 JavaScript 迭代器的語法：
<div v-for="item of items"></div>
迴圈物件
迴圈物件跟迴圈陣列是一樣的。並且都可以在迴圈的時候使用接收多個引數。示例程式碼如下：
<div id="app">
<div v-for="value in person">
{{value}}
</div>
</div>
<script>
let vm = new Vue({
el: "#app",
data: {
person: {
"username": "甲殼蟲",
"age": 18,
"homepage": "https://www.cnblogs.com/jiakecong/"
}
}
});
</script>
結果：
甲殼蟲
18
https://www.cnblogs.com/jiakecong/
你也可以提供第二個的引數為 property 名稱 (也就是鍵名)：
<div v-for="(value, key) in person">
{{key}}:{{value}}
</div>
結果：
username:甲殼蟲
age:18
homepage:https://www.baidu.com/
還可以用第三個引數作為索引：
<div v-for="(value, key, index) in person">
{{index}}.{{key}}:{{value}}
</div>
結果：
0.username:甲殼蟲
1.age:18
2.homepage:https://www.baidu.com/
保持狀態：
迴圈出來的元素，如果沒有使用key元素來唯一標識，如果後期的資料發生了更改，預設是會重用的，並且元素的順序不會跟著資料的順序更改而更改。比如：
<div id="app">
<div v-for="book in books">
<label for="book">{{book}}</label>
<input type="text" :placeholder="book">
</div>
<button @click="changeBooks">更換圖書</button>
</div>
<script>
let vm = new Vue({
el: "#app",
data: {
books: ['三國演義','水滸傳','紅樓夢','西遊記']
},
methods: {
changeBooks: function(event){
this.books.sort((x,y) => {
return 5 - parseInt(Math.random()*10)
});
}
}
});
</script>
我們會發現，如果我們在input標籤中輸入了值，然後點選更換圖書，你會發現即使資料更改了，input並不會跟著資料的更改而更改
這時候我們只需要在v-for的時候加上一個key屬性就可以了。示例程式碼如下：
<div v-for="(book,index) in books" v-bind:key="book">
<label for="book">{{book}}</label>
<input type="text" v-bind:placeholder="book">
</div>
注意，key只能是整形，或者是字串型別，不能為陣列或者物件。
觸發檢視更新：
Vue對一些方法進行了包裝和變異，以後陣列通過這些方法進行陣列更新，會出發檢視的更新。這些方法如下：
1.push()：新增元素的方法。
this.books.push("甲殼蟲")
2.pop()：刪除陣列最後一個元素。
this.books.pop()
3.shift()：刪除陣列的第一個元素
this.books.shift()
4.unshift(item)：在陣列的開頭位置新增一個元素
this.books.unshift("甲殼蟲")
5.splice(start: number, deleteCount: number, ...items: T[])：向陣列中新增或者刪除或者替換元素
start引數代表從第幾個下標開始deleteCount代表刪除幾個數，可以為0代表不刪items代表增加的物件
// 向books第0個位置新增元素
this.books.splice(0,0,"甲殼蟲")
// 下標從0開始，刪除2個元素
this.books.splice(0,2)
// 下標從0開始，替換2個元素
this.books.splice(0,2,'甲殼蟲','aaaa')
6.sort(function)：排序
this.books.sort(function(x,y){
// 取兩個隨機數排序
a = Math.random();
b = Math.random();
return a-b;
});
7.reverse()：將陣列元素進行反轉
this.books.reverse();
還有一些Vue沒有包裝的方法，比如filter、concat、slice，如果使用這些方法修改了陣列，那麼只能把修改後的結果重新賦值給原來的陣列才能生效。比如：
this.books = this.books.filter(function(x){
return x.length>3?false:true;
})
檢視更新注意事項
1.直接修改陣列中的某個值是不會出發檢視更新的。比如：
this.books[0] = '甲殼蟲';
這種情況應該改成用splice或者是用Vue.set方法來實現：
Vue.set(this.books,0,'甲殼蟲');
2.如果動態的給物件新增屬性，也不會觸發檢視更新。只能通過Vue.set來新增。比如：
<div id="app">
<ul>
<li v-for="(value,name) in person" @click="changePerson">{{name}}:{{value}}</li>
</ul>
</div>
<script>
let app = new Vue({
el: "#app",
data: {
person: {"username": '甲殼蟲'}
},
methods: {
changePerson: function(event){
// 直接修改this.person.age是沒有效果的
// this.person.age = 18;
Vue.set(this.person,'age',18)
}
}
});
</script>