我要评论1、HTML代码
<table border="1" cellspacing="0" cellpadding="5">
<th colspan="9">学生列表</th>
<tr>
<td>
<input type="checkbox" @change="checkAll()" v-model="checked">
</td>
<td>ID</td>
<td>姓名</td>
</tr>
<tr v-for="student,index in students">
<td>
<input type="checkbox" :value="student.id" v-model="ids">
</td>
<td>{{student.id}}</td>
<td>{{student.name}}</td>
</tr>
</table>
2、JavaScript代码
<script type="text/javascript" src="js/vue.min.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
students: [
{id: 1, name: "小明"},
{id: 2, name: "小红"},
{id: 3, name: "小兰"},
],
ids: [],
checked: false
},
methods: {
checkAll: function () {
if (this.checked) {
var arr = []
for (let i = 0;i < this.students.length; i++) {
arr.push(this.students[i].id)
}
this.ids = arr
} else {
this.ids = []
}
}
}
})
</script>
本文地址：https://blog.csdn.net/ZhangJiWei_2019/article/details/109615322
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！
网友评论