Vue双向绑定实现多选和全选

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