vue实现全选和取消全选

Posted document_yx

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue实现全选和取消全选相关的知识，希望对你有一定的参考价值。

很简单使用的vue全选和取消全选

直接上代码，简单易懂不懂得可以留言。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>checkboxAll</title>
</head>
<body>
    <div id="app">
        <ul class="checkboxs">
            <li >
                <label>{{checkAllTxt}}<input type="checkbox" v-model="checked" @click= "checkboxAll($event)"></label> 
            </li>
            <li v-for=‘list,index in lists‘>
                <label>{{list.name}}<input type="checkbox" v-model="checkStatusArr[index]"></label> 
            </li>
        </ul>
    </div>
    <script src="../vue.js"></script>
    <script>
        window.onload = function () {
            var vm = new Vue({
                el: ‘#app‘,
                data: {
                    lists: [
                        {
                            ‘name‘: ‘张三‘
                        }, {
                            ‘name‘: ‘李四‘
                        }, {
                            ‘name‘: ‘王五‘
                        }, {
                            ‘name‘: ‘赵六‘
                        }
                    ],
                    checked: false,
                    checkStatusArr: []
                },
                methods: {
                    checkboxAll (event) {
                        this.checkStatusArr = [];
                        if (event.currentTarget.checked) {
                            let len = this.lists.length;
                            for (let i = 0; i < len; i++) {
                                this.checkStatusArr.push(1);// 1 ==true
                            }
                        } else {
                            this.checkStatusArr = [];
                        }
                    }
                },
                watch: {
                    checkStatusArr (val, oldVal) {
                        if (val.length > 0) {
                            this.checked = true;
                        } else {
                            this.checked = false;
                        }
                    }
                },
                computed: {
                    checkAllTxt () {
                        if (this.checked === true) {
                            return ‘全不选‘;
                        } else {
                            return ‘全选‘;
                        }
                    }
                }
            });
        };
    </script>
</body>
</html>

 

以上是关于vue实现全选和取消全选的主要内容，如果未能解决你的问题，请参考以下文章

实现全选和取消全选

react实现全选取消全选和个别选择

vue2.0 实现全选和全不选

TreeView怎么实现复选框的全选和取消全选

Vue实现单选、全选和反选

如何实现复选框的全选和取消全选效果