vue全选和取消全选

Posted jianxian

tags:

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

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
    <div id="app">
            <div v-for="list,index in lists">
                <label :for="index">
                    {{list.name}}<input :id="index" type="checkbox" :value="list.name" v-model="checkboxArr"> //这里注意list.name这个值一定要和checkAll函数中绑定的红色的值要一样
                </label>
            </div>
        <label>
            <input type="checkbox" class="checkbox" @click="selectAll" />{{checkAllAddTxt}}
        </label>
    </div>
    <script src="vue.js"></script>
    <script>
        window.onload = function () {
            var c = new Vue({
                el: ‘#app‘,
                data: {
                    checkboxArr: [],
                    lists: [{ // lists是从接口拿到的要遍历带有checkbox的数据
                        ‘name‘: ‘111‘
                    }, {
                        ‘name‘: ‘222‘
                    }, {
                        ‘name‘: ‘333‘
                    }, {
                        ‘name‘: ‘444‘
                    }],
                    checkAllAddTxt: ‘全选‘ // 作为全选 取消全选的显示文字
                },
                methods: {
                    selectAll: function (event) {
                        var _this = this;
                        if (!event.currentTarget.checked) {
                            this.checkboxArr = []; // 取消全选
                            this.checkAllAddTxt = ‘全选‘;
                        } else { // 实现全选
                            _this.checkboxArr = [];
                            _this.lists.forEach(function (list, i) {
                                _this.checkboxArr.push(list.name);
                            });
                            this.checkAllAddTxt = ‘取消全选‘;
                        }
                    }
                }
            });
        };
    </script>
</body>

</html>

 

 

 

.

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

实现全选和取消全选

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

vue2.0 实现全选和全不选

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

JS做的全选和取消全选

微信小程序 全选和取消全选