<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue.min.js"></script>
</head>
<body>
<div id="app">
<!-- 添加checkbox的功能 -->
<label>Id:
<input type="text" v-model:value="inputid">
</label>
<label>Name:
<input type="text" v-model:value="name">
</label>
<input type="button" value="添加checkbox的功能" @click='add'>
<p v-for="item in list">
<input type="checkbox">{{item.name}}
</p>
</div>
<div id="app2">
<!-- 添加checkbox的功能 -->
<label>Id:
<input type="text" v-model:value="inputid">
</label>
<label>Name:
<input type="text" v-model:value="name">
</label>
<input type="button" value="添加checkbox的功能" @click='add'>
<p v-for="item in list">
<input type="checkbox">{{item.name}}
</p>
</div>
<div id="app3">
<!-- 添加checkbox的功能 -->
<label>Id:
<input type="text" v-model:value="inputid">
</label>
<label>Name:
<input type="text" v-model:value="name">
</label>
<input type="button" value="添加checkbox的功能" @click='add'>
<!-- 注意: v-for循环的时候 用key属性的话 key属性只能用number类型的值或者string类型的值
即: :key的值类型 必须是数字类型或者字符串类型
而对象类型 是不可以的 比如<p v-for="item in list" :key="item">
如本例中的 只能用list数组中对象的id属性或name属性 -->
<p v-for="item in list" :key="item.id">
<input type="checkbox">{{item.name}}
</p>
</div>
<script>
//正确的方式1
var vm = new Vue({
el : '#app',
data : {
inputid : '',
name : '',
list : [
{id : 1,name : '张三1'},
{id : 2,name : '张三2'},
{id : 3,name : '张三3'},
{id : 4,name : '张三4'},
{id : 5,name : '张三5'}
]
},
methods : {
add(){
//push向数组的尾添加一个或更多元素,并返回新的长度。
//添加checkbox
this.list.push({id : this.id,name : this.name});
}
}
});
//错误的方式
var vm2 = new Vue({
el : '#app2',
data : {
inputid : '',
name : '',
list : [
{id : 1,name : '张三1'},
{id : 2,name : '张三2'},
{id : 3,name : '张三3'},
{id : 4,name : '张三4'},
{id : 5,name : '张三5'}
]
},
methods : {
add(){
//unshift向数组的开头添加一个或更多元素,并返回新的长度。
//添加checkbox
//问题出现 你开始勾选数组下标为4 也就是id=5的那条数据 当添加一个checkbox id=6 name="张三6"
//的数据后 发现勾选的选项错位了 勾选的虽然还是数组下标的4的 但是发现勾选的却是
//另一条数组下标为4的数据
this.list.unshift({id : this.id,name : this.name});
}
}
});
//正确的方式2 v-for 加上遍历的key
var vm3 = new Vue({
el : '#app3',
data : {
inputid : '',
name : '',
list : [
{id : 1,name : '张三1'},
{id : 2,name : '张三2'},
{id : 3,name : '张三3'},
{id : 4,name : '张三4'},
{id : 5,name : '张三5'}
]
},
methods : {
add(){
//unshift向数组的开头添加一个或更多元素,并返回新的长度。
//添加checkbox
this.list.unshift({id : this.id,name : this.name});
}
}
});
</script>
</body>
</html>