利用Vue.js实现checkbox的全选反选效果

前言

这篇文章主要是跟大家分享了利用Vue.js实现checkbox的全选反选效果，之前写的代码存在一个bug,就是当你选择全选的时候去掉后面的一个选项，再点全选结果就是反的了。后来很感谢朋友留言帮我改了这个问题嘻嘻,下面一起来看看具体是怎么实现的吧.

html示例代码

<template>
 <div>
 <input type='checkbox' class='input-checkbox' v-model='checked' v-on:click='checkedAll'>全选
 <template v-for='checkb in checkboxData'>
 <input type='checkbox' name='checkboxinput' class='input-checkbox' v-model='checkboxModel' value='{{checkb.id}}'>{{checkb.value}}
 </template>
 </div>
</template>

js示例代码

<script>
export default {
methods:{
 checkedAll: function() {
 var _this = this;
 console.log(_this.checkboxModel);
 if (this.checked) {//实现反选
 _this.checkboxModel = [];
 }else{//实现全选
 _this.checkboxModel = [];
 _this.checkboxData.forEach(function(item) {
 _this.checkboxModel.push(item.id);
 });
 }
 }
},
watch: {//深度 watcher
 'checkboxModel': {
 handler: function (val, oldVal) { 
 if (this.checkboxModel.length === this.checkboxData.length) {
 this.checked=true;
 }else{
 this.checked=false;
 }
 },
 deep: true
 }
},
data () {
 return {
 checkboxData:[{
 id:'1',
 value:'苹果'
 },{
 id:'2',
 value:'荔枝'
 },{
 id:'3',
 value:'香蕉'
 },{
 id:'4',
 value:'火龙果'
 }],
 checkboxModel:['1','3','4'],
 checked:""
 }
}
}
</script>

watch

类型： Object

详细：

一个对象，键是观察表达式，值是对应回调。值也可以是方法名，或者是对象，包含选项。在实例化时为每个键调用 $watch() 。

示例：

var vm = new Vue({
 data: {
 a: 1
 },
 watch: {
 'a': function (val, oldVal) {
 console.log('new: %s, old: %s', val, oldVal)
 },
 // 方法名
 'b': 'someMethod',
 // 深度 watcher
 'c': {
 handler: function (val, oldVal) { /* ... */ },
 deep: true
 }
 }
})
vm.a = 2 // -> new: 2, old: 1

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。

# vue.js # checkbox # 全选 # vuejs # vue # Vue动态生成el-checkbox点击无法赋值的解决方法 # vue实现全选、反选功能 # vue中el-checkbox全选、反选、多选的实现 # 这篇文章 # 是怎么 # 帮我 # 当你 # 这个问题 # 或者是 # 大家分享 # 改了 # 回调 # 主要是 # 再点 # 嘻嘻 # 一起来看看 # 有疑问 # div # input # gt # lt # template

返回目录在线咨询

上一篇：不限建站数的优势如何助力企业拓展国际市场？
下一篇：如何使用Golang进行Socket超时控制_设置读写超时

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商

利用Vue.js实现checkbox的全选反选效果

您的项目需求