<template>
<view>
<!--这个key 也是和vue一样的 是保证组件的唯一性 和 数据的唯一性-->
<block v-for="(item,idnex) in studentArray" :key = "item.id">
<checkbox> {{item.name}} </checkbox>
<br>
</block>
<button style="background-color: #007AFF; color: #FFFFFF;" @click="addStudent">添加同学</button>
</view>
</template>
<script>
export default {
data() {
return {
studentArray:[
{id:1086,name:"张三",age:23},
{id:1087,name:"咸瑜",age:18},
{id:1088,name:"曾阿牛",age:39},
{id:1089,name:"00",age:17},
{id:1090,name:"小闫妮",age:28}
]
}
},
methods: {
addStudent(){
let id = ++this.studentArray[this.studentArray.length-1].id; //模拟id自增长
let name = "NewStudent" + id;
let age = Math.floor((Math.random()*50) + 10);
let newStu = [];
newStu.id = id;
newStu.name = name;
newStu.age = age;
this.studentArray.push(newStu);
}
}
}
</script>
<style>
</style>
v-key.vue
主要逻辑在JS中 主要是看key 的
作者：咸瑜
