vue实现商品购物车全选与全不选项目实战
项目需求:
实现一个购物车
- 全选框实现对商家和商品的全选
- 商家全选框实现对当前商家所有商品的全选
- 取消其中一个商品则取消对应商家全选和全选框
- 选中一个商家下的所有商品则勾选对应商家的全选框,不勾选全选框
- 选中所有商品则勾选所有商家全选框和全选框
我的思路:
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实现商品购物车全选与全不选项目实战的更多相关文章
- 全网最全postman接口测试教程和接口项目实战~从入门到精通!!!
Postman实现接口测试内容大纲一览: 一.什么是接口?为什么需要接口? 接口指的是实体或者软件提供给外界的一种服务. 因为接口能使我们的实体或者软件的内部数据能够被外部进行修改.从而使得内 ...
- vue 入门 ------简单购物车功能实现(全选,数量加减,价格加减)
简易购物车功能(无任何布局 主要是功能) 数量的加减 商品的总价钱 全选与全不选 删除(全选.价格 受影响) <script src="https://cdn.jsdelivr.net ...
- vue+vant-UI框架写的购物车的复选框全选和反选
购物车页面的设计图 商品的列表 代码: <ul v-if="shoppingListData.rows.length"> <li v-for="(ite ...
- vue实现功能 单选 取消单选 全选 取消全选
vue实现功能 单选 取消单选 全选 取消全选 代码部分 <template> <div class=""> <h1>全选框</h1> ...
- vue实现单选多选反选全选全不选
单选 当我们用v-for渲染一组数据的时候,我们可以带上index以便区分他们我们这里利用这个index来简单地实现单选 <li v-for="(item,index) in radi ...
- vue多级复杂列表展开/折叠,全选/分组全选实现
首先,来看下效果图 在线体验地址:https://hxkj.vip/demo/multipleList/.温馨提示,打开之后按F12,使用手机模式食用,口味更佳! 可以看出,这个列表有三种展现形式: ...
- Vue 全选/取消全选,反选/取消反选
这是一个组件: <template> <div> <div> <input type="checkbox" v-model="i ...
- AngularJS--购物车全选/取消全选功能实现
刚学习angularJS,于是练习写了一个类似于购物车的全选/取消全选的功能,主要实现的功能有: 1.勾选全选checkbox,列表数据全部被勾选,取消同理,用ng-model实现双向绑定: 2.选中 ...
- jQuery实现全选、全不选以及反选操作
在写购物车案例时实现全选操作使用的是js的getAttribute()setAttribute()方法获取checked属性的值是undefined实现完成之后全选操作,如果在全选中的情况下改变其中一 ...
随机推荐
- 计算机的Cache和Memory访问时Write-back,Write-through及write allocate的区别
计算机的存储系统采用Register,Cache,Memory和I/O的方式来构成存储系统,无疑是一个性能和经济性的妥协的产物.Cache和Memory机制是计算机硬件的基础内容,这里就不再啰嗦.下面 ...
- 使用on-my-zsh时,php 输出内容后面多个%号
今天用php写个命令行的小工具时,突然发现在echo输出后,总是会多个%号,开始以为是代码的问题,然后新建了一个代码文件: <?php echo 'hello world'; 输出结果: hel ...
- 输入流IS和输出流OS学习总结
1.我们编写的程序,除了自身会定义一些数据信息外,经常还会引用外界的数据,或是将自身的数据发送到外界,比如我们编写的程序想读取一个文本文件, 又或者是我们想将程序的一些数据写到一个文件中,这时我们就要 ...
- Linux kernel的中断子系统之(九):tasklet
返回目录:<ARM-Linux中断系统>. 总结: 二介绍了tasklet存在的意义. 三介绍了通过tasklet_struct来抽想一个tasklet,每个CPU维护一个tasklet链 ...
- xml序列化和反序列化(一)
最近项目中需要调用第三方webservice,入参和出参采用xml格式,大致如下: 入参: <?xml version="1.0" encoding="utf-8& ...
- 使用Map标签指定点击区域时的兼容性问题
电商m站的首页,有一个需求是配一张大的banner图,然后指定某些区域是热区,点击之后跳转到不同的活动页. 听起来简单明了,实现也比较容易,立刻就想起来有个map标签,简直就是为这个需求量身定做. 简 ...
- css的div垂直居中的方法,百分比div垂直居中
前言 我们都知道,固定高宽的div在网页中垂直居中很简单,相信大家也很容易的写出来,但是不是固定高宽的div如何垂直居中呢?我们在网页布局,特别是手机等web端网页经常是不固定高宽的div,那么这些d ...
- logrotate 进行nginx日志分割
http://www.williamsang.com/archives/1254.html 日志分割常用方法: 自己写脚本分割 使用linux自带的logrotate 前者灵活,可以应对各种需求,自定 ...
- 解决vi上下左右变ABCD问题
第一步执行sudo apt-get install vim,如果没有出现错误,再次进入vi 尝试一下,看看有没有修改过来,如果出现以下错误E: Package 'vim' has no insta ...
- jQuery的入口函数四种写法
1.第一种: $(document).ready(function(){ }); 2.第二种(最简洁的写法,推荐): $(function(){ }); 3.第三种: jQuery(document) ...