vue实现全选和反选功能

来源：懂视网责编：小OO 时间：2020-11-27 22:31:15

vue实现全选和反选功能

本文实例为大家分享了vue实现全选反选功能的具体代码，供大家参考，具体内容如下：<。_this.checkBox.items[item.id]) || 0；})；_this.checkBox.checked = unchecked >；0 ?；false ： true；} } })<；/script>；<；/html>

推荐度：

点击下载本文 文档为doc格式

导读本文实例为大家分享了vue实现全选反选功能的具体代码，供大家参考，具体内容如下：<。_this.checkBox.items[item.id]) || 0；})；_this.checkBox.checked = unchecked >；0 ?；false ： true；} } })<；/script>；<；/html>

本文实例为大家分享了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>

vue实现全选和反选功能

推荐度：

点击下载本文 文档为doc格式

标签： VUE 全选实现

热门焦点

vue实现全选和反选功能

vue实现全选和反选功能

vue实现全选和反选功能

最新推荐

猜你喜欢

热门推荐