Vue实现购物车的全选、单选、显示商品价格代码实例-创新互联
今天中午废了一会时间,总算把项目中的购物车的单选、全选、以及实现数据的动态显示做出来了,给小白分享一下我个人一个解决办法:
创新互联专注为客户提供全方位的互联网综合服务,包含不限于成都网站建设、网站设计、迭部网络推广、小程序制作、迭部网络营销、迭部企业策划、迭部品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等,从售前售中售后,我们都将竭诚为您服务,您的肯定,是我们大的嘉奖;创新互联为所有大学生创业者提供迭部建站搭建服务,24小时服务热线:18980820575,官方网址:www.cdcxhl.com购物车的基本页面如下:
先说实现的总体思路
- 1.给table表中表头th加一个 checkbox,设这两个事件:@click=”checkAll” v-model=”checkall”;
- 2.给对应的tr加一个 checkbox 绑定一个事件 v-model=”checked”,checked设为数组,专门放商品Id;
- 3.由于checkall默认为false,当我勾选全选框时,将checkall设为true,往checked数组中遍历添加所有商品ID,每列中的checkbox自动选中,此时已经实现全选的取消\选中了,当单选时,应该将checkAll的状态设为false,这样就能实现单选多选了;
- 4.最后一步就是对数据的动态显示了,data中绑定两个值,分别是price和count,当我勾选某一列时,通过@click=”xx(price,count,productId)”传值放到页面上;
- 5.单选的选中与取消可以通过判断商品id是否存在在数组中,即indexOf(productId)==-1,如果数组中是存在此商品ID,则点击单选框时应减少价格,反之增加。
这是我个人的思路,具体代码实现如下:
html:
图片 商品名 数量 单价 总金额 加入时间 删除 {{dateil.product.productName}} {{dateil.detailProductnum}} {{dateil.detailProductprice}} {{dateil.detailProductprice*dateil.detailProductnum}} {{dateil.detailDatetime}} 购物车空空如也,请先去购买商品~
网页标题:Vue实现购物车的全选、单选、显示商品价格代码实例-创新互联
文章起源:http://ybzwz.com/article/deiccp.html