<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>