vue中v-model实现全选单选

最新推荐文章于 2024-09-01 07:19:05 发布

小桃子~

最新推荐文章于 2024-09-01 07:19:05 发布

阅读量494

点赞数 3

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

本文链接：https://blog.csdn.net/m0_61692295/article/details/127568623

版权

vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

html/template代码

<template>
    <div>
        <span v-for="item in list" :key="item.id">
            <input type="checkbox" v-model="item.isChecked">

        </span>
        <br>
        <input type="checkbox" v-model="check">
    </div>
</template>

计算属性监听数据

computed: {
        check: {
            get() {
                return this.list.length == this.list.filter(item => item.isChecked).length
            },
            set(value) {
                this.list.map(item => item.isChecked = value)
            }
        }
    },

单选数据

  list: [
                { id: 0, isChecked: false },
                { id: 1, isChecked: false },
                { id: 2, isChecked: false },
                { id: 3, isChecked: false },
                { id: 4, isChecked: false },
                { id: 5, isChecked: false },
            ]

总结:简单易看,操作方便.