vue实现全选和反选功能

2019-11-19 15:35:41

字体：大中小

来源：转载

供稿：网友

本文实例为大家分享了vue实现全选反选功能的具体代码，供大家参考，具体内容如下

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Title</title></head><script type="text/javascript" src = "vue.js"></script><body>    <div id = "test">      <input type='checkbox' v-model="checkBox.checked" class='input-checkbox' @click='checkedAll'>全选      <div v-for='checkb in checkboxData'>        <input  type='checkbox' class='input-checkbox' @click="checkItem" v-model='checkBox.items[checkb.id]'>        {{checkb.value}}      </div>    </div></body><script>  var vue = new Vue({    el:"#test",    data:{      checkboxData:[      {        id:'1',        value:'苹果'      },{        id:'2',        value:'荔枝'      },{        id:'3',        value:'香蕉'      },{        id:'4',        value:'火龙果'      }      ],      checkBox:{        checked:false,        items:{}      }    },    methods:{      checkedAll: function() {        var _this = this;        console.log(_this.checkboxData);        console.log(this.checkBox.items);        this.checkboxData.forEach(function (item) {          console.log(item.id);          _this.checkBox.items[item.id] = _this.checkBox.checked;          console.log(_this.checkBox.items);        });        //实现反选      },      checkItem:function(){        var unchecked = 0;        var _this = this;        this.checkboxData.forEach(          function(item) {            unchecked += (! _this.checkBox.items[item.id]) || 0;          });        _this.checkBox.checked = unchecked > 0 ? false : true;      }    }  })</script></html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：js实现canvas图片与img图片的相互转换的示例

下一篇：浅谈Vue 初始化性能优化