一、v-for循環用於數組
v-for 指令根據一組數組的選項列表進行渲染。
1、v-for 指令需要使用 item in items 形式的特殊語法，items 是源數據數組名， item 是數組元素迭代的別名（為當前遍歷的元素提供別名，可以任意起名）。
<ul id="example"> <li v-for="item in items"> {{ item.message }} </li> </ul>
var example= new Vue({ el: '#example', data: { items: [ { message: 'Foo' }, { message: 'Bar' } ] } })
輸出：
Foo
Bar
2、v-for 還支持一個可選的第二個參數為當前項的索引，索引從0開始。
<ul id="example"> <li v-for="(item, index) in items"> {{ index }} - {{ item.message }} </li> </ul>
輸出：
0-Foo
1-Bar
注：可以用of代替in作為分隔符
<div v-for="item of items"></div>
新數組語法
value in arr
(value, index) in arr
二、v-for用於對象
1、v-for 通過一個對象的屬性來遍歷輸出。
<ul id="v-for-object"> <li v-for="value in object"> {{ value }} </li> </ul>
new Vue({ el: '#v-for-object', data: { object: { firstName: 'John', lastName: 'Doe', age: 30 } } })
輸出：
John
Doe
30
2、為v-for提供第二個參數為鍵名
<div v-for="(value, key) in object"> {{ key }}: {{ value }} </div>
3、第三個參數為索引：
<div v-for="(value, key, index) in object"> {{ index }}. {{ key }}: {{ value }} </div>
新對象語法
value in obj
(value, key) in obj
(value, key, index) in obj
三、v-for的key
網上查的資料，那些全部都是一樣的講解算法，算法思想看懂了，但是實際操作不成功，覺得都不能很好的深入把demo寫出來。后續要把該問題解決補充。
{
使用v-for的時候，都必須會加上一個必要的key值。v-for 默認行為試着不改變整體，而是替換元素。迫使其重新排序的元素，你需要提供一個 key 的特殊屬性。
<div v-for="item in items" :key="item.id"> {{ item.text }} </div>
v-for循環數據，當用for來更新已經被渲染的元素時，vue的“就地復用”機，是不會改變數據項的順序的，如果想要重新排序，需要為每項添加key（也就是每項的唯一id）
}
按照自己的理解寫的例子，
其一：當在for循環中加入新元素，如果只是在末尾（push）添加，不使用key也無所謂，不會重新渲染添加元素之前的元素。只有在for循環中間或者開頭添加，如果不使用key，則會引起從添加元素開始，及之后的所有元素的重新渲染。如果假如了key，則只會渲染該加入的元素。
其二：如果在<li v-for="(item,index) in list" v-bind:key="item.id"></li>寫入了index，渲染效果和沒有加key的效果相同，在開頭或者中間加入后面所有都要渲染。（此處不理解網上的寫的例子，后續還是等遇到實際問題，再回來補充解決）
eg：不管是用splice還是this.list.unshift({id:this.newid++,name:"新加入元素"})，
<template>
<div class="content">
<ul>
<li v-for="(item) in list" v-bind:key="item.id">
name:{{item.name}}-id-{{item.id}}
</li>
</ul>
<button v-on:click="add">添加新元素</button>
</div>
</template>
<script> export default { name: 'HelloWorld', data () { return { list : [ { id:1, name:'test' }, { id:2, name:'test2', }, { id:3, name:'test3' }, ], newid:4, } }, methods:{ add:function () { this.list.splice(2,0,{id:this.newid++,name:"新加入元素"}) } } } </script>
四、數組變異方法
Vue 包含一組觀察數組的變異方法，所以它們也將會觸發視圖更新。這些方法如下：
push() 方法和 pop() 方法使用數組提供的先進后出棧的功能。
push()：方法可向數組的末尾添加一個或多個元素，並返回新的長度，它直接修改 arrayObject，而不是創建一個新的數組。pop()：方法用於刪除並返回數組的最后一個元素，把數組長度減 1，並且返回它刪除的元素的值。如果數組已經為空，則 pop() 不改變數組，並返回 undefined 值。shift()：方法用於把數組的第一個元素從其中刪除，並返回第一個元素的值，如果數組是空的，那么 shift() 方法將不進行任何操作，返回 undefined 值。請注意，該方法不創建新數組，而是直接修改原有的 arrayObject。unshift()：方法可向數組的開頭添加一個或更多元素，並返回新的長度，unshift() 方法不創建新的創建，而是直接修改原有的數組splice()：方法向/從數組中添加/刪除項目，然后返回被刪除的項目。
sort():方法用於對數組的元素進行排序reverse():方法用於顛倒數組中元素的順序,該方法會改變原來的數組，而不會創建新的數組。