zoukankan      html  css  js  c++  java
  • Vue.js实现checkbox的全选和反选

    小颖之前写的代码存在一个bug,就是当你选择全选的时候去掉后面的一个选项,再点全选结果就是反的了.很感谢博客园的朋友帮我改了这个问题嘻嘻,下面一起来看看具体是怎么实现的吧.

    1.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>

    2.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:false
      }
    }
    }
    </script>

    3.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
  • 相关阅读:
    性能优化之无阻塞加载脚步方法比较
    谈谈JS中的函数节流
    JS继承类相关试题
    JS继承之寄生类继承
    JS继承之借用构造函数继承和组合继承
    JS继承之原型继承
    谈谈JS的观察者模式(自定义事件)
    JS图片上传预览插件制作(兼容到IE6)
    前端HTML5几种存储方式的总结
    angularJS实用的开发技巧
  • 原文地址:https://www.cnblogs.com/yingzi1028/p/5602784.html
Copyright © 2011-2022 走看看