示例代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>綜合練習</title>
<script src="vue.min.js"></script>
</head>
<body>
<div id="app">
<label>
ID:
<input type="text" v-model="id">
</label>
<label>
Name:
<input type="text" v-model="name">
</label>
<input type="button" value="添加" @click="add">
<p v-for="item in list" :key="item.id">
<input type="checkbox">
id: {{item.id}}=====name: {{item.name}}
</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
id:'',
name:'',
list: [
{id: 1, name: 'name1'},
{id: 2, name: 'name2'},
{id: 3, name: 'name3'},
{id: 4, name: 'name4'},
{id: 5, name: 'name5'},
]
},
methods: {
add() {
// this.list.push({id:this.id,name:this.name})
this.list.unshift({id:this.id,name:this.name})
}
}
});
</script>
</body>
</html>
效果：
