vue笔记

托马斯小火车喷雾又喷烟，一直喷，喷喷喷.

已于 2022-10-21 09:49:05 修改

阅读量1.7w

点赞数

文章标签： vue.js javascript 前端

于 2017-05-02 08:24:58 首次发布

本文链接：https://blog.youkuaiyun.com/InJavaWeTrust/article/details/101063745

版权

本文介绍如何使用Vue.js实现全选功能。通过监听checkbox数组的变化来同步全选框的状态，并利用点击事件来控制全部选中或取消选中。文章包含完整的HTML结构和JavaScript代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue笔记

There is no nutrition in the blog content. After reading it, you will not only suffer from malnutrition, but also impotence.

<div class="checkbox" id="app">
		<label for="quan">
			<!-- 这里的 $event 是将当前对象传入进去，具体详情请参照vue官方文档 -->
			<input id="quan" type="checkbox" @click="checkAll($event)"> 全选
		</label>
		<label>
			<!-- v-model 双向数据绑定命令 -->
			<input class="checkItem" type="checkbox" value="apple" v-model="checkData"> apple
		</label>
		<label>
			<input class="checkItem" type="checkbox" value="banana" v-model="checkData"> banana
		</label>
		<label>
			<input class="checkItem" type="checkbox" value="orange" v-model="checkData"> orange
		</label>
	</div>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
	<script>
	
		new Vue({
			el: '#app',
			data:{
				checkData: [] // 双向绑定checkbox数据数组
			},
			watch: { // 监视双向绑定的数据数组
				checkData: {
					handler(){ // 数据数组有变化将触发此函数
						if(this.checkData.length == 3){
							document.querySelector('#quan').checked = true;
						}else {
							document.querySelector('#quan').checked = false;
						}
					},
					deep: true // 深度监视
				}
			},
			methods: {
				checkAll:function(e){ // 点击全选事件函数
					var checkObj = document.querySelectorAll('.checkItem'); // 获取所有checkbox项
					if(e.target.checked){ // 判定全选checkbox的勾选状态
						for(var i=0;i<checkObj.length;i++){
							if(!checkObj[i].checked){ // 将未勾选的checkbox选项push到绑定数组中
								this.checkData.push(checkObj[i].value);
							}
						}
					}else { // 如果是去掉全选则清空checkbox选项绑定数组
						this.checkData = [];
					}
				}
			}
		});
	</script>