<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="lib/js/vue.js"></script>
</head>
<body>
<div id="app">
id: <input type="text" v-model="id">
name: <input type="text" v-model="name">
<input type="button" value="添加" @click="add">
<!-- v-for循环时key属性只能使用number获取string-->
<!-- key在使用时只能使用v-bind形式绑定形式，指定key的值-->
<p v-for="item in arr" :key="item.id">
<input type="checkbox">
{{item.id}}- - -{{item.name}}
</p>
</div>
<script>
new Vue({
el:'#app',
data:{
id:'',
name:'',
arr:[
{id:1,name:'曹操'},
{id:2,name:'刘备'},
{id:3,name:'孙权'}
]
},
methods:{
add(){
this.arr.unshift({id:this.id,name:this.name})
}
}
})
</script>
</body>
</html>