zoukankan      html  css  js  c++  java
  • vue中实现全选功能

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
    </head>
    <body>
       <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>
    <script>
     
        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;
        }
     }
    })
    </script>
    </body>
    </html>vue

  • 相关阅读:
    linux文件锁flock【转】
    无尽的悲伤
    go的临时对象池--sync.Pool
    golang 小知识-持续更新中
    【转】Go Channels
    Golang文件名命名规则
    Parquet存储格式
    预装的Office2016,文件图标表显示以及新建失败问题解决 方法
    Gamma编码及Delta编码概述
    java web开发环境配置系列(二)安装tomcat
  • 原文地址:https://www.cnblogs.com/huangshikun/p/7097652.html
Copyright © 2011-2022 走看看