海口家政小程序开发_vue完成全选和反选功用

日期:2021-01-11 类型:科技新闻 

关键词:免费自助建站,手机建站平台,wap建站,免费自助建站平台,H5网站,H5模板建站

vue实现全选和反选功能       这篇文章主要为大家详细介绍了vue实现全选和反选功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
div id = "test" input type='checkbox' v-model="checkBox.checked" @click='checkedAll' 全选 div v-for='checkb in checkboxData' input type='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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。