利用Vue.js实现checkbox的全选反选效果
程序员文章站
2022-10-06 18:21:02
前言
这篇文章主要是跟大家分享了利用vue.js实现checkbox的全选反选效果,之前写的代码存在一个bug,就是当你选择全选的时候去掉后面的一个选项,再点全选结果就是...
前言
这篇文章主要是跟大家分享了利用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
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。
上一篇: PHP 数组基础知识小结