vue全選和取消全選（無bug）

時間 2020-05-19

標籤 vue 全選取消 bug 简体版

原文原文鏈接

很簡單的使用vue實現全選和取消全選

直接上代碼，簡單易懂不懂得能夠留言。html

<!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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。