原因：对于已经渲染过的页面元素，Vue默认使用“就地复用的原则”，不会移动DOM元素来匹配数据
注意：
1.作为key，一定时唯一的，并且需要被v-bind绑定
2.v-bind绑定的key属性只能只用唯一的number或String
没有绑定出现的问题：
key值使用之后：
绑定key之后的HTML代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../lib/vue.js"></script>
</head>
<body>
<div id="app">
<div>
<label>
name:
<input type="text" v-model="name">
</label>
<label>
schoolId:
<input type="text" v-model="schoolId">
</label>
<input type="button" value="插入" @click="add">
</div>
<p v-for="item in list" :key="item.name">
<input type="checkbox">
{{ item.name }} -- {{item.schoolId}}
<!--v-bind绑定的key属性只能只用唯一的number或String-->
</p>
</div>
<script>
var vm1 = new Vue({
el:'#app',
data:{
name:null,
schoolId:null,
list:[
{name:'陈小帅',schoolId:160720131},
{name:'chenxiaoshuai',schoolId:160720131},
{name:'chensmallcool',schoolId:160720131}
]
},
methods:{
add(){
this.list.unshift({name:this.name,schoolId:this.schoolId})
//在最前面添加
}
}
});
</script>
</body>
</html>