vue 使用vant 的van-checkbox-group来实现全选反选以及单选

最新推荐文章于 2024-09-04 11:57:55 发布

summer88221

最新推荐文章于 2024-09-04 11:57:55 发布

阅读量1w

点赞数 5

分类专栏： vue

本文链接：https://blog.csdn.net/qq_29236119/article/details/116016945

版权

本文介绍了如何使用Vue.js结合Vant UI库中的van-checkbox-group组件，实现列表图片的全选、反选及单选功能。通过示例代码展示具体实现过程。

摘要由CSDN通过智能技术生成

一、在做项目的时候有一个列表图片需要实现全选反选以及单选的功能，如下效果：
在这里插入图片描述
这里基于vue+vant来实现的，代码如下：

<template>
    <div class="punch-picture-wrapper">
        <div class="punch-picture-bottom">
            <div class="bottom-left">
                <van-checkbox v-model="checkAllFlag" shape="square" @change="checkAll">全选</van-checkbox>
            </div>
        </div>
        <div class="punch-picture-content">
            <div class="punch-picture-list">
                <div class="picture-row">
                    <div class="picture-col" v-for="(item, index) in dataList" :key