1、v-for指令，基於一個數組來渲染一個列表。（也可以基於一個物件）

2、v-for指令，需要使用（item,index）initems形式的特殊語法。其中

1>items是源資料陣列。

2>item是被迭代的陣列元素的別名。

3>index是索引。

或者 （value,key,index）in obj 形式的特殊語法。其中

1>obj是源資料物件。

2>key 是被迭代的物件屬性名，value 是被迭代的物件屬性值。

3> index是索引。

3、v-for中key屬性的使用

1>key屬性值的型別只能是string或number，主要用在Vue的虛擬DOM演算法，在新舊nodes對比辯識Nodes。

2>如果不使用key，Vue會使用一種最大限度減少動態元素並且儘可能的嘗試就地修改/複用相同型別元素的演算法。

而使用key時，它會基於key的變化重新排列元素順序，並且會移除key不存在的元素。

3>相同父元素的子元素key值必須唯一不能重複，重複的key會造成渲染錯誤。

4、當使用v-for遍歷陣列時，如果沒有指定key，當陣列元素順序發生變更時，DOM繫結的資料會更新，而DOM本身的順序不會變化。

如果指定了key，當陣列元素順序發生變更時，DOM會和資料

<template v-if='false'><!--5、沒有指定key的話，首先給列表的第一個資料項羊肉串打✓，再點選新增按鈕-->
    <div v-for='(item,index) in list'><!--發現新新增的資料項，出現在原列表羊肉串資料項的前面，即索引位置不變，索引的內容改變了-->
        <label>                       <!--而打√的依舊是列表第一個索引的複選框。-->
            <input type="checkbox"
 
>{{item.title}}
        </label>
    </div>
    <button type="button" v-on:click='add()'>新增</button>
</template>
<template><!--5、指定key的話，索引位置不變，索引內容也不變。也就是說，key是一個不能動態變化的唯一值，類似id-->
    <div v-for='(item,index) in list' :key='item.id'><!--key繫結的可以是: 1、資料唯一值id，一般這個id可以通過ajax從後臺介面中的資料拿到-->
        <label>                                                     <!--2、自己做一個時間戳賦值給key,只要key值不一樣就行-->
            <input type="checkbox">{{item.title}}                   <!--3、迴圈巢狀時候，可設定為對應級別的index索引-->
        </label>
    </div>
    <button type="button" v-on:click='add()'>新增</button>
</template>

<script>
let data={
    list:[
        {id:1,title:'羊肉串',price:2}, //5、key繫結的是資料唯一值id，一般這個id可以通過ajax從後臺介面中的資料拿到
        {id:2,title:'啤酒',price:4},
        {id:3,title:'花毛一體',price:10}
    ],
};
methods:{
    add(){
        this.list.unshift( {id:4,title:'土豆片',price:2},);//5、key繫結的是資料唯一值id，一般這個id可以通過ajax從後臺介面中的資料拿到
    }
}
</script>

5、Vue例項的set()方法，檢測資料更新即監聽屬性值變化，解決資料更新，不能即時渲染到檢視中的問題。

<script>
let data={
    list:[
        {id:1,title:'羊肉串',price:2},
        {id:2,title:'啤酒',price:4},
        {id:3,title:'花毛一體',price:10}
    ],     
};

vue.$data.list[1].price=14;
//4、Vue例項的set()方法，檢測資料更新即監聽屬性值變化，解決資料更新，不能即時渲染到檢視中的問題。
/*
**第一個引數：要更新的資料來源、物件或陣列。
**第二個引數：key或是索引。
**第三個引數：要賦的值。
*/
vue.set(vue.$data.list,1,vue.$data.list[1]);//在改變資料物件某個資料的程式碼後面，緊跟這個方法，才能起作用。
//this.$set(this.list,1,this.list[1]);//當this指向Vue例項時候，也可以這樣寫。
</script>