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

最新推荐文章于 2024-01-13 01:00:00 发布
最新推荐文章于 2024-01-13 01:00:00 发布
阅读量2k 收藏 3
点赞数 4
分类专栏： Vue 文章标签： javascript html vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_37922443/article/details/116153161
版权
  1. @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>
  1. 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>
  1. 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>
Seven_5477
关注
  • 4
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Vue实现单选多选反选全选全不选
吴小花的博客
10-09 2463
功能：实现点击选中，再点击取消选中，全选，取消全选，左滑删除。 页面效果如下： 左滑删除功能需要用到mint-ui的mt-cell-swiper。 注意使用这个插件的时候不能用v-if，要用v-show，否则无法实现预期效果。 （我在这上面踩了很久的坑，才突然顿悟的） 需要引入mint相关的js和css <link rel="stylesheet" type="text/css" href="../cs...
vue实现全选、全不选和部分选择功能
Charles_Tian的博客
07-24 1万+
在开发项目的过程当中，特别是开发后台管理系统时，会有很多的数据等待管理员去统一管理，所以有时候还需要将一些数据导出，然后打印，这是很有必要的，因为数据可以帮助分析这个产品是否具有价值。 我这里演示后台返回的数据格式如下： ​ { data:{ list:[ {id:240201,code:'nqctedp80pc8',desc:'推广',typ...
Vue实现动态复选框的全选 全不选 获取选中值
m0_51945510的博客
11-19 4955
Vue实现动态复选框的全选 全不选 获取选中值
vue3+element-plus 表格全选和跨页勾选，以及全选全部功能
鹤渺的星球
10-30 1万+
这个功能，需要考虑很多交互的逻辑，因为我写的是【全选全部】是一个checkbox的勾选框，所以要考虑取消勾选的功能，自然就有了上面真正实现时的难点。但是如果这个功能是通过一个按钮控制的，点击按钮就代表全选所有操作，那么自然不用考虑取消勾选和禁用的逻辑，因为全选所有时，就已经走完批量全选的流程了。两种实现方式根据业务具体的调整，这次也是为了记录实现这个功能时遇到的问题和思考。
vue实现全选全不选,也可以用js实现这些功能
大姐的博客
10-24 1038
小功能全选反选，删除，适用于多个场景，适合小白练手
Vue学习（事件监听、条件判断）
coder_Alger 的博客
04-04 1067
一、事件监听 1、v-on：（语法糖@）的基本使用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>v-on的基本使用</title> </head> <body> <div i...
element-ui 框架的checkbox组件：点击事件 与 选中判断 - 代码篇
热门推荐
草巾冒小子的博客
03-02 3万+
element-ui 框架的checkbox组件：点击事件 与 选中判断 - 代码篇
vue计算属性computed、事件、监听器watch的使用讲解
10-17
今天小编就为大家分享一篇关于vue计算属性computed、事件、监听器watch的使用讲解，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧
vue 实现全选全不选的示例代码
08-27
* 简洁高效：使用 Vue 的双向数据绑定命令和 watch 机制可以轻松实现全选全不选的功能，而无需大量的 DOM 操作。 * 易于维护：使用 Vue 的数据驱动 DOM 的思想使得开发者可以更好地控制 UI 的行为，减少了对 DOM 的...
vue.js实现的全选与全不选功能示例【基于elementui】
10-17
主要介绍了vue.js实现的全选与全不选功能,结合实例形式分析了vue.js基于elementui实现全选与全不选功能的相关页面渲染、初始化数据及功能函数等相关操作技巧,需要的朋友可以参考下
vue2.0实现一键全选，全不选
06-01
当单个选中所有时，全选自动变成全选状态；当全选后，取消其中一个，全选状态改变。
vue 全选与反选的实现方法(无Bug 新手看过来)
12-29
我就废话不多说，直接上代码吧！ &lt;!DOCTYPE html> &lt;html lang=en&gt; &lt;head&gt; &lt;meta charset=UTF-8&gt; &lt;title&gt;Document&lt;/title&gt; &lt;/head&gt; &lt;body&gt; <div id=app> <div xss=removed> <ul xss=removed> <li v-for=(item,> &lt;input type=checkbox :value=index v-model=selectArr&gt;{{it
vue中实现二维数组的全选、全不选、反选、部分全选功能（图文示例）
最新发布
大剑师兰特的GIS世界
01-13 1213
根据vue项目的需求，需要做二维数组的全选、全不选、反选、部分全选功能。 怎么制作呢？ 全选、全不选很好处理，反选和部分全选处理起来麻烦一些，需要判断父级是否为选中状态。具体的代码请采纳考示例。
Vue实现单选、全选、反选
ScumStudy的博客
03-01 4003
<template> <div> <div><input type="checkbox" v-model="checkAll" />全选</div> <div><input type="checkbox" @change="inverse" />反选</div> <div class="fruit" v-for="(item, index) in fruits" :key="in
vue实现单选多选反选全选全不选
weixin_33802505的博客
09-07 1136
单选 当我们用v-for渲染一组数据的时候，我们可以带上index以便区分他们我们这里利用这个index来简单地实现单选 <li v-for="(item,index) in radioList" :key="index" :class="selectedNum==index?'active':''" @click="select(...
vue实现多选、全选
m0_59224033的博客
09-05 1万+
vue实现多选、全选功能，复制粘贴开箱即用，简简单单，干净卫生，欢迎C+V
实例，用computed 计算属性，来进行全选和反选
lzfengquan的博客
08-18 840
看图 要求，点击全选按钮实现内容全选，，再次点击全不选。点击内容全部选中时，全选按钮也选中，否则就不选中 代码如下 <div id="app"> <input type="checkbox" v-model="allChecked" />全选 <ul> <li v-for="item in list"> <input v-model="item.checked" type="checkbox" />{{item.nam.
学习Vue3 第九章（认识computed计算属性）
qq1195566313的博客
02-05 1万+
computed用法 计算属性就是当依赖的属性的值发生变化的时候，才会触发他的更改，如果依赖的值，不发生变化的时候，使用的是缓存中的属性值。 1 函数形式 import { computed, reactive, ref } from 'vue' let price = ref(0)//$0 let m = computed<string>(()=>{ return `$` + price.value }) price.value = 500 2 对象形式 &lt.
vue 购物车demo 用到了计算属性computed v-for @click
冲锋
04-30 4120
template模板 &lt;template&gt; &lt;div class="two"&gt; &lt;table border="1px solid #666" style="width:500px;"&gt; &lt;thead&gt; &lt;tr&gt;
一个页面做分页，每一页有12个卡片，头部有全选，卡片中有复选框，点击全选选中并保存id数组，翻页有保留选中状态，全选成半状态，帮我用vue3+element实现以上代码
06-01
好的，针对您的需求，我为您提供一个基于Vue3和Element UI的示例代码。您可以参考下面的代码来实现您的功能： ```vue <template> <div> <!-- 全选框 --> <el-checkbox v-model="isAllChecked" @change="handleAllCheckedChange" :indeterminate="isIndeterminate"> {{ isAllChecked ? '已全选' : '全选' }} </el-checkbox> <!-- 卡片列表 --> <el-row> <el-col v-for="card in currentCards" :key="card.id" :span="6"> <el-card> <el-checkbox v-model="checkedIds" :label="card.id" @change="handleCardCheckedChange(card.id)"> {{ card.name }} </el-checkbox> </el-card> </el-col> </el-row> <!-- 分页器 --> <el-pagination :current-page="currentPage" :page-size="pageSize" :total="totalCards" @current-change="handlePageChange" /> </div> </template> <script> import { ref, computed, watch } from 'vue' export default { name: 'MyPage', data() { return { cards: [], // 所有卡片 checkedIds: [], // 已选中的卡片id数组 isAllChecked: false, // 是否已全选 isIndeterminate: false, // 是否半选 currentPage: 1, // 当前页码 pageSize: 12, // 每页显示数量 totalCards: 0, // 总共的卡片数量 } }, computed: { // 当前页的卡片列表 currentCards() { const start = (this.currentPage - 1) * this.pageSize const end = this.currentPage * this.pageSize return this.cards.slice(start, end) }, }, methods: { // 全选框变化时的处理函数 handleAllCheckedChange(value) { this.isAllChecked = value this.checkedIds = value ? this.cards.map(card => card.id) : [] }, // 卡片复选框变化时的处理函数 handleCardCheckedChange(id) { if (this.checkedIds.includes(id)) { // 取消选中 this.checkedIds.splice(this.checkedIds.indexOf(id), 1) this.isAllChecked = false } else { // 选中 this.checkedIds.push(id) if (this.checkedIds.length === this.currentCards.length) { this.isAllChecked = true } } }, // 页面变化时的处理函数 handlePageChange(page) { this.currentPage = page }, }, watch: { // 监听已选中的卡片id数组变化，计算全选框状态和是否半选 checkedIds: { handler(value) { if (value.length === 0) { this.isAllChecked = false this.isIndeterminate = false } else if (value.length === this.currentCards.length) { this.isAllChecked = true this.isIndeterminate = false } else { this.isAllChecked = false this.isIndeterminate = true } }, immediate: true, }, // 监听currentPage变化，重新计算当前页的卡片列表 currentPage: { handler(value) { const start = (value - 1) * this.pageSize const end = value * this.pageSize this.currentCards = this.cards.slice(start, end) }, immediate: true, }, }, created() { // 模拟异步获取卡片数据 setTimeout(() => { this.cards = [ { id: 1, name: '卡片1' }, { id: 2, name: '卡片2' }, { id: 3, name: '卡片3' }, { id: 4, name: '卡片4' }, { id: 5, name: '卡片5' }, { id: 6, name: '卡片6' }, { id: 7, name: '卡片7' }, { id: 8, name: '卡片8' }, { id: 9, name: '卡片9' }, { id: 10, name: '卡片10' }, { id: 11, name: '卡片11' }, { id: 12, name: '卡片12' }, { id: 13, name: '卡片13' }, { id: 14, name: '卡片14' }, { id: 15, name: '卡片15' }, { id: 16, name: '卡片16' }, { id: 17, name: '卡片17' }, { id: 18, name: '卡片18' }, { id: 19, name: '卡片19' }, { id: 20, name: '卡片20' }, { id: 21, name: '卡片21' }, { id: 22, name: '卡片22' }, { id: 23, name: '卡片23' }, { id: 24, name: '卡片24' }, { id: 25, name: '卡片25' }, ] this.totalCards = this.cards.length }, 1000) }, } </script> ``` 以上代码中，我们使用了Element UI的组件来实现全选框、卡片列表和分页器。通过计算属性和监听器，我们实现了卡片列表的分页、全选和半选的状态切换，以及保留已选中卡片状态的功能。同时，我们使用了Vue3的Composition API来组织代码，使其更加清晰易懂。 希望以上代码能够对您有所帮助。如果您还有其他问题或需要进一步的帮助，请随时问我。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值