vue中使用计算属性巧妙的实现多选框的“全选”

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

以下这张gif图,就是最终的实现效果:

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

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

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

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

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

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

第二步,设置全选框

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

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

get器

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

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

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

set器

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

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

原文地址:https://www.cnblogs.com/shapman/p/12236095.html

时间: 2024-10-10 09:08:54

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

1.3 Vue中的计算属性和侦听器

Vue中的计算属性和侦听器 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Vue中的计算属性和侦听器</title> <!--1 引入Vue库--> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

jQuery实现复选框的全选、反选、并且根据复选框的&lt;checked属性&gt;控制多个对应div的显示/隐藏

<!doctype html><html> <head> <meta charset="utf-8"> <title>jQuery实现复选框的全选.反选.并且根据复选框的(checked属性)控制多个对应div的显示/隐藏</title> <script type="text/javascript" src="jquery-1.11.3.min.js"></

Vue中的计算属性

一.什么是计算属性 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护. 二.计算属性的用法 在一个计算属性里可以完成各种复杂的逻辑,包括运算.函数调用等,只要最终返回一个结果就可以. <div id="example"> <p>Original message: "{{ message }}"</p> <p>Computed reversed message: &

怎样理解 Vue 中的计算属性 computed 和 methods ?

需求: 在 Vue 中, 我们可以像下面这样通过在 引号 或 双花括号 内写 js 表达式去做一些简单运算, 这是可以的, 不过这样写是不直观的, 而且在 html 中 夹杂 一些运算逻辑这种做法其实并不好. 最理想的情况是: html 只负责展示, 绑定的数据都是 赤裸裸 的 变量, 而非 表达式 , 这样就会比较人性化. 想要达到这种效果可以有两种方法: computed 和 methods. 1. 使用 methods 相当于是为这个 字符串倒序 的功能单独写了一个函数, 这个函数在 Vu

Vue中的计算属性和侦听属性

Vue的侦听属性可以使用 watch ,它可以监听多个变量,一旦它们发生了变化,就执行function函数,var代表的是这个发生变化了的参数. var vm = new Vue({ el: '#demo', data: { firstName: 'Foo', lastName: 'Bar', fullName: 'Foo Bar' }, watch: { firstName: function (val) { this.fullName = val + ' ' + this.lastName

vue中computed计算属性与methods对象中的this指针

this 指针问题 methods与computed中的this指针 应该指向的是它们自己,可是为什么this指针却可以访问data对象中的成员呢? 因为new Vue对象实例化后data中的成员和computed中的成员为实现化对象属性了,而methods中定义的方法为实现化对象方法了.这时this指针指向的是这个实现化对象. let v = new Vue({ el: '.test', data: { title: "121213" }, methods: { msg() { al

vue 全选与取消全选

所用知识点 1 v-model:监听input内容 2 watch:监听属性方法 参考https://cn.vuejs.org/v2/api/#watch 3 页面初始化调用函数 mounted 一:html元素 实现思路 1 v-model 一个收集所有input(除全选框外)数组checkModel ,vue会动态将其checked为true的input的value值存入数组checkModel里 2 watch函数来监听checkModel 属性,当其长度==input元素时 全选按钮选中

vue全选和取消全选

代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <div v-for="list,index in lists"> <

GridView中实现全选与取消全选,以便同时删除多条数据

我们项目后台操作中不可避免的会有同时删除多项的操作,本文实现的就是当点击全选时,选定当前页中所有项,当取消了某一项的选定,则“全选”CheckBox的checked也为false:然后在后台中取到所选定的项的ID,实现同时删除多项的功能. 前台代码 Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/--> 1 <%@ Page Language="