zoukankan      html  css  js  c++  java
  • vue实现全选效果

    vue实现全选效果

       接触vue快半年了,记得刚用vue做项目的时候遇到一个全选功能,当时到处百度也没有找到怎么实现,最后还是用了jquery进行dom操作实现的。
    今天没事就顺手写了一个,感觉很简单,js代码也就十几行就实现了,废话不多说亮代码。
    
    ```
      html
        <div id='app' class='container'>
        <input type="checkbox" name="" id="allId" v-model="allData.parCheck" @change="allSelect()">
        <label for="allId">{{allData.text}}</label> {{allData.parCheck}}
        <ul>
            <li v-for="item in checkData">
                <input type="checkbox" name="" @change="singleSelect()" v-model="item.isCheck" :id="item.id">
                <label :for="item.id">{{item.value}}</label> {{item.isCheck}}
            </li>
        </ul>
       </div>
    
        js
     var app = new Vue({
        el: '#app',
        data: {
        allData: {
            parCheck: false,
            text: '全选'
        },
        checkData: [{
            id: '1',
            value: '香蕉',
            isCheck: false
        }, {
            id: '2',
            value: '苹果',
            isCheck: false
        }, {
            id: '3',
            value: '梨子',
            isCheck: false
        }, {
            id: '4',
            value: '菠萝',
            isCheck: false
        }, {
            id: '5',
            value: '西瓜',
            isCheck: false
        }]
     },
     methods: {
        allSelect() {
            var vm = this;
            vm.checkData.forEach(item => {
                item.isCheck = vm.allData.parCheck
            })
        },
        singleSelect() {
            var vm = this;
            var selectData = vm.checkData.filter(item => {
                return item.isCheck == true
            })
    
            selectData.length == vm.checkData.length ? vm.allData.parCheck = true : vm.allData.parCheck = false;
        }
     }
    })
    
    注:在此遇到一个坑vue2里面现在已经不允许将选择器绑定到html或body上了
    
  • 相关阅读:
    log4j学习
    数据库索引
    php 通过exec 创建git分支失败
    Nginx 常用全局变量 及Rewrite规则详解
    Jetbrains phpstorm pycharm 免费授权注册码
    Nginx return 关键字配置小技巧
    PHP 加密 和 解密 方法
    Nginx 禁用IP IP段
    Yii2 捕获错误日志
    transform 实现响应式绝对居中
  • 原文地址:https://www.cnblogs.com/lijinblogs/p/6749599.html
Copyright © 2011-2022 走看看