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

以下这张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. 为什么使用kotlin可以节省开发时间

    前言:.kotlin是一门语言,光靠一篇文章要入门不太现实,所以这篇文章重点讲的是kotlin相对于java的一些特性和这些特性带来的好处. 一.简单介绍 Kotlin 是一种在 Java 虚拟机上运 ...

  2. $Noip2018/Luogu5022$ 旅行

    $Luogu$ $Description$ 一个$n$个点,$m$条边的图.$m=n-1$或$m=n$.任意选取一点作为起始点,可以去往一个没去过的点,或者回到第一次到达这个点时来自的点.要求遍历整个 ...

  3. .Net Core Web Api实践之中间件的使用（一）

    前言:从2019年年中入坑.net core已半年有余,总体上来说虽然感觉坑多,但是用起来还是比较香的.本来我是不怎么喜欢写这类实践分享或填坑记录的博客的,因为初步实践坑多,文章肯定也会有各种错误,跟 ...

  4. 第 426 期 Python 周刊

    文章,教程和讲座 端到端机器学习:从数据收集到模型部署 链接: https://ahmedbesbes.com/end-to-end-ml.html 在本文中,我们将完成构建和部署机器学习应用程序的必 ...

  5. MySQL中文乱码 - window环境

    MySQL中文乱码 window环境 Linux环境请参考这篇文章:[https://www.cnblogs.com/hankleo/p/9695842.html]: 查看及修改字符集sql --查看 ...

  6. 基于 HTML5 WebGL 与 WebVR 3D 虚实现实的可视化培训系统

    前言 2019 年 VR, AR, XR, 5G, 工业互联网等名词频繁出现在我们的视野中,信息的分享与虚实的结合已经成为大势所趋,5G 是新一代信息通信技术升级的重要方向,工业互联网是制造业转型升级 ...

  7. spring cloud微服务快速教程之（六） 应用监控 spring boot admin

    0-前言 当我们发布了微服务后,我们希望对各个应用的各个运行状况进行一个监控:这个时候spring boot admin,就出场了: spring boot admin:是一个监控和管理spring ...

  8. Python for Data Analysis 学习心得（二） - pandas介绍

    一.pandas介绍 本篇程序上篇内容,在numpy下面继续介绍pandas,本书的作者是pandas的作者之一.pandas是非常好用的数据预处理工具,pandas下面有两个数据结构,分别为Seri ...

  9. K8S与harbor的集成

    文章编写在有道云笔记,采用MarkDown编写,迁移太麻烦了,具体链接如下: http://note.youdao.com/noteshare?id=a9d344951e1fbb761ef7e4979 ...

  10. C++ | C++ 基础知识 | 指针、数组与引用

    1.指针 在 C++ 语言中存放及使用内存地址是通过指针和引用完成的. char c = 'a'; // 声明 c 变量,c 变量存储的是 'a' 的值. char* p = &c; // 声 ...