接下来我会以一个购物车的例子，来演示如果借助计算属性，精巧的实现多选框的全选功能。当然，有全选，自然对应的也还有取消全选。

以下这张gif图，就是最终的实现效果：

第一步，针对购物车每一个商品进行设置

根据上图可以发现，购物车中的每一件商品都有一个选择框，而这个选择框则是需要用一个布尔字段，通过v-model绑定进去，监听该条购物车记录的选中状态。

首先，沟通后端，为前端预留一个select属性

该属性默认设置为false，因为购物车在被渲染出来时，默认是应该没有勾选任何一件商品的

然后，绑定到每一条购物车记录的选择框

前端接收到后端的json数组后，v-for循环遍历其内的数据。

第二步，设置全选框

全选框则是通过v-model绑定一个计算属性

在这个计算属性中，写进去一个get器和set器

get器

get器里面，监听所有购物车记录的选中状态，当购物车所有的记录都被选中的时候，全选按钮自动处于选中状态

当其中任意一条购物车记录的选中状态被取消后，全选按钮自动取消。

因为计算属性本身就会去监听data中cartInfo这个数据字段是否出现改变，所以可以利用这个特性，做出上述这种监听效果

set器

set器对应的是一个带参的函数，用户对全选按钮的选择动作，可以通过函数中的这个参数传递进来。

然后就可以通过这个参数实现全选或取消全选

vue2.x中使用计算属性巧妙的实现多选框的“全选”的更多相关文章

  1. jQuery实现复选框的全选、反选、并且根据复选框的<checked属性>控制多个对应div的显示/隐藏

    <!doctype html><html> <head> <meta charset="utf-8"> <title>j ...

  2. vue2.0中的计算属性

    计算属性是一个很邪门的东西,只要在它的函数里引用了data中的某个属性,当这个属性发生变化的时候,函数仿佛可以嗅探到这个变化,并自动重新执行. 上代码会源源不断的打印出a的值.如果希望b依赖data中 ...

  3. Vue - 在v-repeat中使用计算属性

    1.从后端获取JSON数据集合后,对单条数据应用计算属性,在Vue.js 0.12版本之前可以在v-repeat所在元素上使用v-component指令 在Vue.js 0.12版本之后使用自定义元素 ...

  4. Vue中的计算属性与$watch

    计算属性:在模板中绑定表达式是非常便利的,但是他们实际上只用于简单的操作.模板是为了描述视图的结构.在模板中放入太多的逻辑会让模板过重且难以维护.这就是为什么vue.js将绑定表达式限制为一个表达式. ...

  5. vuejs中的计算属性和监视

    计算属性 1.在computed属性对象中定义计算属性的方法,在页面上使用{{方法名}}来显示计算结果 2.通过getter/setter实现对属性数据的显示和监视 3.计算属性存在缓存,多次读取只执 ...

  6. Vue学习之vue中的计算属性和侦听器

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. Blazor和Vue对比学习（基础1.8）：Blazor中实现计算属性和数据监听

    1.7章<传递UI片断>,需要做几个案例,这部分暂停消化几天.我们先把基础部分相对简单的最后两章学习了. 计算属性和数据监听是Vue当中的概念,本质上都是监听数据的变化,然后做出响应.两者 ...

  8. Silverlight 中DataGrid中全选与非全选问题

    问题:当点击全选时,全选所有的复选框,但是滚动屏幕时,却复选框就会取消选中 一.解决方法(将要展示的实体数据模型添加bool属性,在数据绑定时添加click时间,盘带选中的状态,就可以了) 1. xa ...

  9. Vue中的计算属性和监听器（computed 与 watch）

    react中数据是单向绑定的,而vue中数据是双向绑定的.为什么? 在react中,主要是通过setState 去改变state的值:而在vue中,会自动的触发set 与get 改变属性的值. 在vu ...

随机推荐

  1. vue项目创建步骤 和 路由router知识点

    菜单快捷导航: vue项目创建 vue路由router知识点(路径参数.查询参数.命名路由.嵌套路由.命名视图.hash/history模式) 1.创建一个vue项目步骤 (windows环境下).创 ...

  2. $Noip2018/Luogu5020$ 货币系统 $dp$

    $Luogu$ 去年我这题获得了$20$的好分数$ovo..........$ $Sol$ 现在来看其实非常显然叭,只要把能被别的数表示出来的数去掉就好了. $f[i]$表示$i$数能否被其他数表示. ...

  3. 「CH2501」 矩阵距离 解题报告

    CH2501 矩阵距离 描述 给定一个N行M列的01矩阵 A,\(A[i][j]\) 与 \(A[k][l]\) 之间的曼哈顿距离定义为: \(dist(A[i][j],A[k][l])=|i-k|+ ...

  4. Java散点

    1.在Java中,所有需要保存在常量池中的数据,长度最大不能超过65535,这当然也包括字符串的定义

  5. (二)Angular+spring-security-cas前后端分离（基于ticket代码实现

    一.前端实现 1.1.路由守卫(用于拦截路由认证) import { Injectable, Inject } from "@angular/core"; import { Can ...

  6. C++Primer第五版 3.2.3节练习

    练习 3.6:编写一段程序,使用范围for语句将字符串内的所有字符用X代替. #include<iostream> #include<string> using namespa ...

  7. 记第一个javaweb网页

      <%@ page language="java" contentType="text/html; charset=utf-8" pageEncodin ...

  8. 分享一款基于aui框架的图文发布界面

    本文出自APICloud官方论坛, 感谢论坛版主 川哥哥 的分享. 分享一款基于aui框架的图文发布界面,可以添加多张图可以删除,类似qq空间发布说说,没做服务器后端,只演示前端操作.需要用到UIMe ...

  9. 枚举 xor

    题意:输入整数n(1<=n<=3千万),有多少对整数(a,b)满足:1<=b<=a<=n,且gcd(a,b)=a XOR b.例如:n=7时,有4对:(3,2),(5,4 ...

  10. 网站 cache control 最佳实践

    推荐阅读: 2020年软件开发趋势 高并发案例 - 库存超发问题 负载均衡的分类及算法 异地多活架构 Postman 的替代品来了 有时,当第二次访问网站时,看起来比较怪,样式不正常. 通常,是因为 ...