项目需求:

实现一个购物车
  • 全选框实现对商家和商品的全选
  • 商家全选框实现对当前商家所有商品的全选
  • 取消其中一个商品则取消对应商家全选和全选框
  • 选中一个商家下的所有商品则勾选对应商家的全选框,不勾选全选框
  • 选中所有商品则勾选所有商家全选框和全选框

我的思路:

1、通过对数据的简单操作可实现更深层次的全选操作

2、vue.$set(object, key, value)给对象添加属性可以更新视图

3、通过es6的every判断数组中是否每个元素都满足条件,都满足返回true,有一个不满足则返回false

html代码:

<div class="box">
<input type="checkbox" v-model="checkedAll" @change="checkAll"> 全选
</div>
<div class="list" style="margin-left:50px;" v-for="(val,k) in data" :key="k">
<div class="box">
<input type="checkbox" v-model="val.checked" @change="_checkAll(val)">
{{val.seller}}
</div>
<ul v-for="(item,index) in val.goodsList" :key="index">
<li>
<input type="checkbox" v-model="item.checked" @change="handleCheck(item,index)">
{{item.name}}
</li>
</ul>
</div>

js代码:

 var app = new Vue({
el: "#app",
data: {
checkedAll: false, //控制是否全选
data: [{
seller: "商家1",
goodsList: [{
name: '商品1'
}]
}, {
seller: "商家2",
goodsList: [{
name: '商品2'
}, {
name: '商品3'
}]
}] //数据
},
mounted() {
this.data.forEach(item => {
this.$set(item, "checked", false) //Vue 解决不能检测到对象属性的添加或删除
// item.checked = false; //如果为真实数据直接设置的对象改变值不会更新视图
if (item.goodsList) {
item.goodsList.forEach((citem) => {
this.$set(citem, "checked", false)
// citem.checked = false;
})
}
});
},
methods: {
//全选
checkAll() {
this.data.forEach(item => {
item.checked = this.checkedAll;
if (item.goodsList) {
item.goodsList.forEach(citem => {
citem.checked = this.checkedAll;
})
}
})
},
//商家全选
_checkAll(val, k) {
val.goodsList.forEach(item => {
item.checked = val.checked;
});
if (this.data.every(item => item.checked)) {
this.checkedAll = true;
} else {
this.checkedAll = false;
} },
//商品选择框
handleCheck(item, index) {
var check = []; //保存中间层是否被选中的布尔值
this.data.forEach((items, index) => {
if (items.goodsList) {
var bool = items.goodsList.every(citem => citem.checked);
if (bool) {
items.checked = true;
} else {
items.checked = false;
}
check.push(bool);
}
})
if (check.indexOf(false) == -1) {
this.checkedAll = true;
} else {
this.checkedAll = false;
}
},
}
})

效果如图:

vue实现商品购物车全选与全不选项目实战的更多相关文章

  1. 全网最全postman接口测试教程和接口项目实战~从入门到精通!!!

    Postman实现接口测试内容大纲一览: ​ 一.什么是接口?为什么需要接口? ​ 接口指的是实体或者软件提供给外界的一种服务. 因为接口能使我们的实体或者软件的内部数据能够被外部进行修改.从而使得内 ...

  2. vue 入门 ------简单购物车功能实现(全选,数量加减,价格加减)

    简易购物车功能(无任何布局 主要是功能) 数量的加减 商品的总价钱 全选与全不选 删除(全选.价格 受影响) <script src="https://cdn.jsdelivr.net ...

  3. vue+vant-UI框架写的购物车的复选框全选和反选

    购物车页面的设计图 商品的列表 代码: <ul v-if="shoppingListData.rows.length"> <li v-for="(ite ...

  4. vue实现功能 单选 取消单选 全选 取消全选

    vue实现功能 单选 取消单选 全选 取消全选 代码部分 <template> <div class=""> <h1>全选框</h1> ...

  5. vue实现单选多选反选全选全不选

    单选 当我们用v-for渲染一组数据的时候,我们可以带上index以便区分他们我们这里利用这个index来简单地实现单选 <li v-for="(item,index) in radi ...

  6. vue多级复杂列表展开/折叠,全选/分组全选实现

    首先,来看下效果图 在线体验地址:https://hxkj.vip/demo/multipleList/.温馨提示,打开之后按F12,使用手机模式食用,口味更佳! 可以看出,这个列表有三种展现形式: ...

  7. Vue 全选/取消全选,反选/取消反选

    这是一个组件: <template> <div> <div> <input type="checkbox" v-model="i ...

  8. AngularJS--购物车全选/取消全选功能实现

    刚学习angularJS,于是练习写了一个类似于购物车的全选/取消全选的功能,主要实现的功能有: 1.勾选全选checkbox,列表数据全部被勾选,取消同理,用ng-model实现双向绑定: 2.选中 ...

  9. jQuery实现全选、全不选以及反选操作

    在写购物车案例时实现全选操作使用的是js的getAttribute()setAttribute()方法获取checked属性的值是undefined实现完成之后全选操作,如果在全选中的情况下改变其中一 ...

随机推荐

  1. ELK 架构之 Elasticsearch 和 Kibana 安装配置

    阅读目录: 1. ELK Stack 简介 2. 环境准备 3. 安装 Elasticsearch 4. 安装 Kibana 5. Kibana 使用 6. Elasticsearch 命令 最近在开 ...

  2. java ArrayList集合

    ArrayList集合是程序中最常见的一种集合,它属于引用数据类型(类).在ArrayList内部封装了一个长度可变的数组,当存入的元素超过数组长度时,ArrayList会在内存中分配一个更大的数组来 ...

  3. mysql在ubuntu中的操作笔记(详)

    1.安装mysql客户端流程: -  登录navicat官网下载 -  将压缩包拷贝ubuntu中进行解压,解压命令:tar zxvf navicat.tar.gz -  进入解压目录,运行命令./s ...

  4. MySql 物理文件组成

    1.日志文件        MySQL 各类日志文件介绍 2.数据文件        MySQL 各类数据文件介绍

  5. Eclipse从数据库逆向生成Hibernate实体类和映射文件(Eclipse插件系列之HibernateTools)

    ♣下载安装Eclipse插件(HibernateTools) ♣Eclipse连接数据库(Mysql5.7) ♣新建hibernate.properties和hibernate.cfg.xml文件 ♣ ...

  6. (WCF初体验)WCF服务器诊断

    WCF服务器搭建好之后,不管是客户端访问还是本地调试,出个问题抛出来的原因往往在我们看来都是不知所以然的,更可能是跑出来的问题和真正的问题差了很远,比如"通信对象 System.Servic ...

  7. 解决Ubuntu系统下的VMware Workstation无法打开虚拟网络编辑器界面的问题

    本文由荒原之梦原创,原文链接:http://zhaokaifeng.com/?p=630 操作环境: Ubuntu 17 VMware 14 pro for Linux 问题描述: 我在Ubuntu ...

  8. yum安装指定版本的软件包的方法

    yum默认都是安装最新版的软件,这样可能会出一些问题,或者我们希望yum安装指定(特定)版本(旧版本)软件包.所以,就顺带分享yum安装指定(特定)版本(旧版本)软件包的方法. 过程如下:假设这里是我 ...

  9. HTTP状态码的详细解释,供参考

    HTTP状态码详解 常用对照表 状态码 含义 100 客户端应当继续发送请求.这个临时响应是用来通知客户端它的部分请求已经被服务器接收,且仍未被拒绝.客户端应当继续发送请求的剩余部分,或者如果请求已经 ...

  10. 如何解决-win7系统打开截图工具显示“截图工具当前未在计算机上运行”

    打开win7系统自带截图工具,显示"截图工具当前未在计算机上运行.请重新启动计算机,然后重试",  解决方法  1.首先在C盘中搜索tpcps.dll: 2.将数据最大那个tpcp ...