项目需求:

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

我的思路:

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. 基于Microsoft Graph打造自己的Timeline应用

    原文链接:https://github.com/chenxizhang/office365dev/blob/e9b5a59cb827841d36692cc4ec52c11d43062e04/docs/ ...

  2. redis的持久化之AOF

    AOF Redis 分别提供了 RDB 和 AOF 两种持久化机制: RDB 将数据库的快照(snapshot)以二进制的方式保存到磁盘中. AOF 则以协议文本的方式,将所有对数据库进行过写入的命令 ...

  3. JAVAEE——Mybatis第一天:入门、jdbc存在的问题、架构介绍、入门程序、Dao的开发方法、接口的动态代理方式、SqlMapConfig.xml文件说明

    1. 学习计划 第一天: 1.Mybatis的介绍 2.Mybatis的入门 a) 使用jdbc操作数据库存在的问题 b) Mybatis的架构 c) Mybatis的入门程序 3.Dao的开发方法 ...

  4. Executor, ExecutorService 和 Executors 间的区别与联系

    UML简要类图关系: 下面详细看一下三者的区别: Executor vs ExecutorService vs Executors 正如上面所说,这三者均是 Executor 框架中的一部分.Java ...

  5. 快速失败(fail-fast)和安全失败(fail-safe)的区别

    1.fail-fast和fail-safe比较 Iterator的安全失败是基于对底层集合做拷贝,因此,它不受源集合上修改的影响.java.util包下面的所有的集合类都是快速失败的,而java.ut ...

  6. linux内核裁剪及编译可加载模块

    一:linux内核裁剪: 1:编译内核源码: 今天的重点内容是内核驱动的编写,在编写驱动之前首先的了解linux内核源码,linux主要是由五个子系统组成:进程调度,内存管理,文件系统,网络接口以及进 ...

  7. Elasticsearch结构化搜索_在案例中实战使用term filter来搜索数据

    1.根据用户ID.是否隐藏.帖子ID.发帖日期来搜索帖子 (1)插入一些测试帖子数据 POST /forum/article/_bulk { "index": { "_i ...

  8. SpringMvc 这篇文章写得不错 多多学习2017.6.29

    http://www.cnblogs.com/bigdataZJ/p/springmvc1.html  博客园链接

  9. 浏览器中缓存Cache

        在请求服务器资源时,服务器会将图片.网页文件等资源保存在客户端的临时文件夹中,称为缓存,当浏览器向服务器请求相同的资源时,如果与服务器版本一致,则从缓存读取     Cookie:服务器存放在 ...

  10. Python Web 框架:Tornado

    1.Tornado Tornado:python编写的web服务器兼web应用框架 1.1.Tornado的优势 轻量级web框架 异步非阻塞IO处理方式 出色的抗负载能力 优异的处理性能,不依赖多进 ...