1、學前准備：
JavaScript中有一個方法：unshift() ，其作用是向數組的開頭添加一個或更多元素，並返回新的長度。該方法的第一個參數將成為數組的新元素 0，如果還有第二個參數，它將成為新的元素 1，以此類推。
2、直接上代碼
<body>
<divi id="app">
序號：<input type="text" v-model="idValue"/> 
車名：<input type="text" v-model="nameValue"/> 
<button v-on:click="add()">添加</button>
<p v-for="item in list">
<input type="checkbox" name="car"></checkbox>序號：{{item.id }} , 車名：{{ item.name }}<br/>
</p>
</div>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
idValue:'',
nameValue:'',
list:[
{id:1,name:'奧迪'},
{id:2,name:'寶馬'},
{id:3,name:'奔馳'},
{id:4,name:'勞斯萊斯'},
{id:5,name:'瑪莎拉蒂'}
]
},
methods:{
add(){
this.list.unshift({
id : this.idValue,
name : this.nameValue
});
}
}
})
</script>
</body>
這里我們定義了一個list集合，並通過在input中輸入內容，然后把新的車型添加到list集合中並顯示在頁面上。運行結果如下：
我們在第一個input框中填入數字6，第二個input框中添加保時捷車型，點擊添加按鈕，運行結果如下;
看頁面信息好像我們已經添加成功了，沒有什么問題。現在我們把序號為5的瑪莎拉蒂復選框勾上，然后再點擊添加按鈕，看看有什么現象。
What?明明勾的是瑪莎拉蒂怎么變成勞斯萊斯了！原因就在於v-for指令只能簡單的實現數據的遍歷，當你的數據發生變化的時候，由於數據和指令的唯一關聯就是遍歷時的數組下標，所以當你勾選瑪莎拉蒂的時候，指令記住了你勾選的數組下標為5（數組下標是從0開始的），當你往數組里添新元素之后，雖然數組長度變了，但是指令只記得你當時勾選的數組下標，於是就幫你把新數組中下標為5的勞斯萊斯給勾選了。為了解決這種問題，在使用v-for指令的時候我們需要加入一個新屬性：key，寫法為key="XX"，其中XX必須具有唯一性，即可以通過key來識別出對應的遍歷元素。
<p v-for="item in list" v-bind:key="item.id">
<input type="checkbox" name="car"></checkbox>
序號： {{item.id }} , 車名：{{ item.name }}<br/>
</p>
這里在v-for指令里加入了key屬性，通過屬性綁定指令v-bind綁定了元素的序號，即通過序號來識別每個數組元素（當然這個時候你要保證序號不能重復，要具備唯一性，不然勾選序號重復的元素的時候還是會出現上面的問題）。這個時候再把序號為5的瑪莎拉蒂復選框勾上，然后再點擊添加按鈕，看看有什么現象。
保時捷被成功添加了，而且瑪莎拉蒂的復選框還是被選中狀態。
總結：如果你只是簡單的遍歷，那么v-for指令完全可以滿足，如果還涉及到數組數據的改變或者操作，那么就需要加上屬性key來幫助指令來識別每個遍歷元素。
每天進步一點點！