Vue三种方式实现全选全不选：@click点击事件方式、computed计算属性方式和watch监听器方式

最新推荐文章于 2025-03-26 00:16:44 发布

Seven_5477

最新推荐文章于 2025-03-26 00:16:44 发布

阅读量2.4k

点赞数 4

分类专栏： Vue 文章标签： javascript html vue.js

本文链接：https://blog.csdn.net/m0_37922443/article/details/116153161

版权

Vue 专栏收录该内容

26 篇文章

订阅专栏

本文介绍了在Vue.js中通过click事件、computed计算属性和watch监听器三种方式实现全选和反选功能。利用v-model双向绑定，结合数组操作和条件判断，可以有效地控制复选框的选择状态。示例代码详细展示了每种方法的实现细节，帮助开发者理解Vue.js中的数据绑定和响应式原理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

@click点击事件方式：全选按钮添加点击事件checkAll，点击全选按钮时改变选项的点击状态。下面的选项按钮用一个div包裹，并添加change事件来监听是否全选。
注：click事件是点击之后，视图里的数据还没有更新到data数据里，所以导致data数据不是最新的状态，需要取反。change事件是视图绑定的数据发生了改变，才会去执行。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <input type="checkbox" value="OK" v-model="all" @click="checkAll">全选/非全选
        <br>
        <div @change="delegate">
            <div v-for="item,index in hobbyList">
                <input type="checkbox" :value="item.value" :id="item.id|handleID" v-model="checkList">
                <label :for="item.id|handleID">{{item.name}}</label>
            </div>
        </div>
    </div>

    <script src="js/vue.min.js"></script>
    <script type="text/javascript">
        let vm1 = new Vue({
            el: "#app",
            data: {
                hobbyList: [
                    {
                        id: 1,
                        name: "唱歌",
                        value: "sing"
                    },
                    {
                        id: 2,
                        name: "跳舞",
                        value: "dance"
                    },
                    {
                        id: 3,
                        name: "读书",
                        value: "read"
                    },
                    {
                        id: 4,
                        name: "画画",
                        value: "draw"
                    }
                ],
                 // 存储选中的兴趣爱好
                checkList: [],
                // 存储全选按钮的选中状态
                all: []
            },
            filters: {
                handleID(value) {
                    return 'hobby' + value;
                }
            },
            methods: {
                checkAll() {
                    // click事件处理=>下面的判断要取反
                    if (!this.all.includes('OK')) {
                        this.hobbyList.forEach(item => {
                            this.checkList.push(item.value);
                        });
                    }
                    else {
                        this.checkList = [];
                    }
                },
                delegate() {
                    this.all = this.checkList.length === 4 ? ['OK'] : [];
                }
            }
        });
    </script>
</body>

</html>

computed计算属性方式：计算属性必须关联至少一个响应式data数据，响应式数据改变，计算属性就改变。 推荐使用。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <input type="checkbox" v-model="selected">全选/非全选
        <br>
        <div v-for="item,index in hobbyList">
            <input type="checkbox" :value="item.value" :id="item.id|handleID" v-model="checkList">
            <label :for="item.id|handleID">{{item.name}}</label>
        </div>
    </div>

    <script src="js/vue.min.js"></script>
    <script type="text/javascript">
        let vm1 = new Vue({
            el: "#app",
            data: {
                hobbyList: [
                    {
                        id: 1,
                        name: "唱歌",
                        value: "sing"
                    },
                    {
                        id: 2,
                        name: "跳舞",
                        value: "dance"
                    },
                    {
                        id: 3,
                        name: "读书",
                        value: "read"
                    },
                    {
                        id: 4,
                        name: "画画",
                        value: "draw"
                    }
                ],
                // 存储选中的兴趣爱好
                checkList: []
            },
            filters: {
                handleID(value) {
                    return 'hobby' + value;
                }
            },
            computed: {
                // 存储全选按钮的选中状态
                selected: {
                    get() {
                        return this.checkList.length === this.hobbyList.length ? true : false;
                    },
                    set(value) {
                        // 点击全选按钮时，修改selected的值,value存储的是选中的状态
                        if (value) {
                            this.hobbyList.forEach(item => {
                                this.checkList.push(item.value);
                            });
                            return;
                        }
                        this.checkList = [];
                    }
                }
            },
            methods: {
            }
        });
    </script>
</body>

</html>

watch监听器方式：监听的是data中的数据。
注：这里不能把全选按钮selected放入watch中监听，因为它的变化是由checkList变化决定的，一起监听会被一直影响，导致结果不对。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <input type="checkbox" v-model="selected" @change="checkAll">全选/非全选
        <br>
        <div v-for="item,index in hobbyList">
            <input type="checkbox" :value="item.value" :id="item.id|handleID" v-model="checkList">
            <label :for="item.id|handleID">{{item.name}}</label>
        </div>
    </div>

    <script src="js/vue.min.js"></script>
    <script type="text/javascript">
        let vm1 = new Vue({
            el: "#app",
            data: {
                hobbyList: [
                    {
                        id: 1,
                        name: "唱歌",
                        value: "sing"
                    },
                    {
                        id: 2,
                        name: "跳舞",
                        value: "dance"
                    },
                    {
                        id: 3,
                        name: "读书",
                        value: "read"
                    },
                    {
                        id: 4,
                        name: "画画",
                        value: "draw"
                    }
                ],
                // 存储选中的兴趣爱好
                checkList: [],
                // 存储全选按钮的选中状态
                selected: false
            },
            filters: {
                handleID(value) {
                    return 'hobby' + value;
                }
            },
            watch: {
                checkList() {
                    this.selected = this.checkList.length === this.hobbyList.length ? true : false;
                }
            },
            methods: {
                checkAll() {
                    if (this.selected) {
                        this.hobbyList.forEach(item => {
                            this.checkList.push(item.value);
                        });
                        return;
                    }
                    this.checkList = [];
                }
            }
        });
    </script>
</body>

</html>