javascript 使用vue实现全选和取消全选

最新推荐文章于 2024-01-03 22:00:00 发布

Excel_VBA创维大表格จุ๊บ

最新推荐文章于 2024-01-03 22:00:00 发布

阅读量264

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_44681501/article/details/132950159

版权

html部分

<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

<div id="app">
	<input type="checkbox" id="checkbox" v-model="checked" @change="changeAllChecked()" />
	<label for="checkbx">
		{{checked}}
	</label>
	<br />
	<input type="checkbox" id="val1" value="选项1" v-model="checkedname" />
	<label for="val1">选项1</label>
	<br />
	<input type="checkbox" id="val2" value="选项2" v-model="checkedname" />
	<label for="val2">选项2</label>
	<br />
	<input type="checkbox" id="val3" value="选项3" v-model="checkedname" />
	<label for="val3">选项3</label>
	<br />
	<span>选择的值为:{{checkedname}}</span>
</div>

js部分

var vm = new Vue({
	el: '#app',  //挂载位置
	data: {
		checked: false,
		checkedname: [],
		checkedArr: ["选项1", "选项2", "选项3"]
	},
	methods: {
		changeAllChecked: function() {
			if (this.checked) {
				this.checkedname = this.checkedArr
			} else {
				this.checkedname = []
			}
		}
	}
})

有兴趣的赶紧去试试吧，希望能帮助到您！