一、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():方法用於顛倒陣列中元素的順序,該方法會改變原來的陣列，而不會建立新的陣列。