vue全选和取消全选（无bug）

最新推荐文章于 2023-02-21 14:42:05 发布

weixin_33720078

最新推荐文章于 2023-02-21 14:42:05 发布

阅读量696

点赞数 1

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/lm-it/p/8467400.html

版权

很简单的使用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>

转载于:https://www.cnblogs.com/lm-it/p/8467400.html

weixin_33720078

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue全选和取消全选（无bug）

很简单的使用vue实现全选和取消全选直接上代码，简单易懂不懂得可以留言。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body...
复制链接

扫一扫