Vue实现checkbox复选框全选

最新推荐文章于 2024-07-19 17:02:07 发布

IronCode1024

最新推荐文章于 2024-07-19 17:02:07 发布

阅读量1k

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/pyc_01/article/details/103280101

版权

Vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="app">
        全选<input type="checkbox" v-model="checkAll" @click="fnCheckAll">
        <template v-for="(item,key) in checks">
            <input type="checkbox" v-model="item.value" :key="key" :value="item.text" @click="fn">{{item.text}}
        </template>
        {{checkValue}}
    </div>
    <script src="vue.min.js"></script>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                checks: [
                    { text: "质子", value: true }, { text: "电子", value: false }, { text: "中子", value: true }
                ],
                checkValue: []
            },
            computed: {
                checkAll: {
                    get() {
                        return this.checks.every(check => check.value)
                    },
                    set(value) {// 双向数据绑定
                        this.checks.forEach(check => check.value = value);
                    }
                }
            }, methods: {
                fn(e) {//单选数据
                    this.checkValue.push(e.target.value);
                },
                fnCheckAll() {//获取全选的数据
                    this.checkValue=[];
                    for (let index = 0; index < this.checks.length; index++) {
                        if (this.checks[index].value) {
                            this.checkValue.push(this.checks[index].text);
                        }
                    }
                }
            }
        });
    </script>
</body>
</html>