1.一個小demo ，
一個id ，一個name ，一個add 。 點擊add ，追加id和name對象data中的list數組里。
input輸入，使用v-model雙向綁定
代碼如下
<div>
<label>Id:</label>
<input type="text" name="" id="" value="" v-model="id"/>
<label>Name</label>
<input type="text" name="" id="" value="" v-model="name" />
<input type="button" name="" id="" value="點擊" @click="add()"/>
</div>
輸入id和name ，點擊add，數據追加。 所以add的事件
methods: {
add() { // 添加方法
this.list.unshift({ id: this.id, name: this.name })
//在數組的前面添加對象。
}
}
添加后則數組更新。
更新數據后。 頁面顯示。 對數據進行渲染
<p v-for="item in list" :key="item.id">
<input type="checkbox">{{item.id}} --- {{item.name}}
</p>
<!-- 注意： v-for 循環的時候，key 屬性只能使用 number獲取string -->
<!-- 注意： key 在使用的時候，必須使用 v-bind 屬性綁定的形式，指定 key 的值 -->
<!-- 在組件中，使用v-for循環的時候，或者在一些特殊情況中，如果 v-for 有問題，必須 在使用 v-for 的同時，指定 唯一的 字符串/數字 類型 :key 值 -->