mysql反选字段_利用Vue.js实现checkbox的全选反选效果

前言

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

html示例代码

全选

{{checkb.value}}

js示例代码

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:""

}

}

}

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

总结

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