Vue实现简易购物车页面


Posted in Vue.js onDecember 30, 2020

VUE实现简易购物车效果,供大家参考,具体内容如下

简易的购物车小demo

引用了一下bootstrap3,的表格

Vue实现简易购物车页面

<section id="gouwuche">
 
 <table class="table table-hover">
 <thead>
  <tr>
  <th>
  <input type="checkbox" @change="handlechange" v-model="isAllChange" @click='inshow()'/>
  全选
  </th>
  <th>商品信息</th>
  <th>单价</th>
  <th>数量</th>
  <th>金额</th>
  <th>操作</th>
  </tr>
 </thead>
 <tbody>
  <tr style="height:50px;"></tr>
  <tr v-for="(date,index) in arr" :class="{bgcolor:isActive}">
  <td>
  <input type="checkbox" v-model="checkgroup" :value="date" @change="handleLiChange" />
  <img :src="date.imges"/>
  {{date.name}}
  </td>
  <td>
  <p>{{date.networkType}}</p>
  <p>{{date.colorClass}}</p>
  <p>{{date.packageType}}</p>
  <p>{{date.rom}}</p>
  <p>{{date.purchaseMethod}}</p>
  <br>
  </td>
  <td>
  <p><b class="danjia">{{date.price}}</b></p>
  </td>
  <td>
  <button @click="handleDelclike(date)" >-</button>
  <input type="text" :value="date.numbers"/>
  <button @click="date.numbers++">+</button>
  </td>
  <td>
  <p><b class="jiner">{{getSumje(date)}}.00</b></p>
  </td>
  <td>
  <p>移入收藏夹</p>
  <a href="#" @click="rmove(index)">删除</a>
  </td>
  </tr>
 </tbody>
 </table>
 
 <div class="box">
 <div class="boxa">
  <input type="checkbox" @change="handlechange" v-model="isAllChange" @click='inshow()'/>
  <a href="#" >全选</a>
  <a href="#" >删除</a>
 </div>
 <div class="boxc">
  <p>已选商品:<b class="jiner">{{checkgroup.length}}</b></p>
  <p>合计(不含运费):<b class="jiner">{{getSum()}}<b></p>
 </div>
 <div class="boxb" >
  结算
 </div>
 </div>
</section>

CSS:

#gouwuche {
 width: 1200px;
 height: ;
 margin: 0 auto;
}

.box {
 width: 1200px;
 height: 50px;
 margin: 30px auto;
 display: flex;
 justify-content: space-between;
 align-items: center;
 background-color: #C4E3F3;
}

.boxa {
 width: 780px;
 height: 50px;
}

.boxa a {
 margin-right: 50px;
}

.boxb {
 width: 120px;
 height: 50px;
 background-color: #C0C0C0;
 display: flex;
 align-items: center;
 justify-content: center;
 color: white;
 font-size: 18px;
}

.boxc {
 width: 300px;
 height: 50px;
 display: flex;
 align-items: center;
 justify-content: space-between;
}

input {
 width: 50px;
 text-align: center;
}

img {
 width: 60px;
 height: 60px;
}

a {
 text-decoration: none;
 color: #000;
}

* {
 font-size: 12px;
}

p {
 margin: 0;
 padding: 0;
 line-height: 1.9;
}

.danjia {
 font-size: 16px;
}

.jiner {
 font-size: 18px;
 color: #FF8C00;
}
.bgcolor{
 background-color: rgba(205,205,205,0.2);
 
}

js:

var gouwuche = new Vue({
 el:"#gouwuche",
 data:{
 checkgroup:[],
 isAllChage:false,
 isActive:false,
 arr:[
 {
  //商品名
  name:"小米 note8 Pro",
  //图片地址
  imges:"img/t1.jpg",
  //颜色分类
  colorClass:"机身颜色:冰翡翠",
  //网络类型
  networkType:"网络类型:4G+全网通",
  //套餐类型
  packageType:"套餐类型:官方标配",
  //存储容量
  rom:"存储容量:6+128GB",
  //购买方式
  purchaseMethod:"官方旗舰店",
  //单价
  price:1299.00,
  //数量
  numbers:1,
  //金额
  money:1299.00,
  //索引
  id:"1",
 },
 {
  //商品名
  name:"红米 k30 5G",
  //图片地址
  imges:"img/t3.jpg",
  //颜色分类
  colorClass:"机身颜色:紫玉幻境",
  //网络类型
  networkType:"网络类型:5G+全网通",
  //套餐类型
  packageType:"套餐类型:官方标配",
  //存储容量
  rom:"存储容量:8+128GB",
  //购买方式
  purchaseMethod:"官方旗舰店",
  //单价
  price:1499.00,
  //数量
  numbers:1,
  //金额
  money:1499.00,
  //索引
  id:"2",
 },
 {
  //商品名
  name:"红米 k30 Pro",
  //图片地址
  imges:"img/t4.jpg",
  //颜色分类
  colorClass:"机身颜色:象牙白",
  //网络类型
  networkType:"网络类型:5G+全网通",
  //套餐类型
  packageType:"套餐类型:官方标配",
  //存储容量
  rom:"存储容量:8+256GB",
  //购买方式
  purchaseMethod:"官方旗舰店",
  //单价
  price:3999.00,
  //数量
  numbers:1,
  //金额
  money:3999.00,
  //索引
  id:"3",
 },
 {
  //商品名
  name:"红米 k20 Pro",
  //图片地址
  imges:"img/t4.jpg",
  //颜色分类
  colorClass:"机身颜色:象牙白",
  //网络类型
  networkType:"网络类型:5G+全网通",
  //套餐类型
  packageType:"套餐类型:官方标配",
  //存储容量
  rom:"存储容量:8+256GB",
  //购买方式
  purchaseMethod:"官方旗舰店",
  //单价
  price:3999.00,
  //数量
  numbers:1,
  //金额
  money:3999.00,
  //索引
  id:"3",
 }
 ],
 },
 
 methods:{
 
 inshow:function(){
  this.isActive = !this.isActive;
 },
 
    //总额
 getSum:function(){
  var sum = 0;
  for(var i in this.checkgroup){
  sum += this.checkgroup[i].numbers * this.checkgroup[i].price;
  }
  return sum;
 },
 
    //单品总额
 getSumje:function(date){
  var sum = date.price;
  sum *= date.numbers;
  return sum;
 },
 
    //判断全选框
 handlechange:function(){
  if(this.isAllChange){
  this.checkgroup = this.arr;
  }else{
  this.checkgroup = [];
  }
 },
 
    //判断全选框
 handleLiChange:function(){
  if(this.checkgroup.length !== this.arr.length){
  this.isAllChange = false;
  }else{
  this.isAllChange = true;
  }
 },
 
    //数量减1
 handleDelclike:function(date){
  var numbers = date.numbers--;
  if(numbers === 1){
  date.numbers = 1;
  }
 },
 
    //删除
 rmove:function(index){
  var that = this;
  that.arr.splice(index,1);
  that.checkgroup.splice(index,1);
  

 }
 
 }
 
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Vue.js 相关文章推荐
Vue Elenent实现表格相同数据列合并
Nov 30 Vue.js
vue中如何添加百度统计代码
Dec 19 Vue.js
vue 在单页面应用里使用二级套嵌路由
Dec 19 Vue.js
Vue实现小购物车功能
Dec 21 Vue.js
Vue通过阿里云oss的url连接直接下载文件并修改文件名的方法
Dec 25 Vue.js
vue 页面跳转的实现方式
Jan 12 Vue.js
如何在 Vue 表单中处理图片
Jan 26 Vue.js
vue如何使用rem适配
Feb 06 Vue.js
使用Vue3+Vant组件实现App搜索历史记录功能(示例代码)
Jun 09 Vue.js
Vue中使用import进行路由懒加载的原理分析
Apr 01 Vue.js
vue自定义右键菜单之全局实现
Apr 09 Vue.js
vue 自定义组件添加原生事件
Apr 21 Vue.js
利用Vue实现简易播放器的完整代码
Dec 30 #Vue.js
vue+element UI实现树形表格
Dec 29 #Vue.js
vue实现树状表格效果
Dec 29 #Vue.js
vue实现图书管理系统
Dec 29 #Vue.js
Vue实现随机验证码功能
Dec 29 #Vue.js
vue3+typeScript穿梭框的实现示例
Dec 29 #Vue.js
Vue.extend 登录注册模态框的实现
Dec 29 #Vue.js
You might like
通过文字传递创建的图形按钮
2006/10/09 PHP
PHP新手上路(五)
2006/10/09 PHP
php面向对象全攻略 (十七) 自动加载类
2009/09/30 PHP
php合并js请求的例子
2013/11/01 PHP
PHP文件锁定写入实例解析
2014/07/14 PHP
隐性调用php程序的方法
2015/06/13 PHP
关于php微信订阅号开发之token验证后自动发送消息给订阅号但是没有消息返回的问题
2015/12/21 PHP
Codeigniter中集成smarty和adodb的方法
2016/03/04 PHP
用Jquery重写windows.alert方法实现思路
2013/04/03 Javascript
100个不能错过的实用JS自定义函数
2014/03/05 Javascript
javasript实现密码的隐藏与显示
2015/05/08 Javascript
Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法
2016/06/23 Javascript
使用 jQuery.ajax 上传带文件的表单遇到的问题
2016/10/31 Javascript
深入理解jquery中extend的实现
2016/12/22 Javascript
jQuery动态生成表格及右键菜单功能示例
2017/01/13 Javascript
Angular2 组件间通过@Input @Output通讯示例
2017/08/24 Javascript
Node.js利用断言模块assert进行单元测试的方法
2017/09/28 Javascript
认识jQuery的Promise的具体使用方法
2017/10/10 jQuery
vue插件开发之使用pdf.js实现手机端在线预览pdf文档的方法
2018/07/12 Javascript
vue2使用keep-alive缓存多层列表页的方法
2018/09/21 Javascript
JavaScript设计模型Iterator实例解析
2020/01/22 Javascript
微信分享invalid signature签名错误踩过的坑
2020/04/11 Javascript
微信小程序实现简单的select下拉框
2020/11/23 Javascript
[04:59]DOTA2-DPC中国联赛 正赛 Ehome vs iG 选手采访
2021/03/11 DOTA
python用10行代码实现对黄色图片的检测功能
2015/08/10 Python
Python实现优先级队列结构的方法详解
2016/06/02 Python
浅析Python 实现一个自动化翻译和替换的工具
2019/04/14 Python
python中的线程threading.Thread()使用详解
2019/12/17 Python
匈牙利超级网上商店和优惠:Alza.hu
2019/12/17 全球购物
如何设置Java的运行环境
2013/04/05 面试题
亲子活动总结
2014/04/26 职场文书
乡镇精神文明建设汇报材料
2014/08/15 职场文书
授权委托书
2014/09/17 职场文书
房屋登记授权委托书范本
2014/10/09 职场文书
小学毕业感言100字
2015/07/30 职场文书
2019财务管理制度最新范本!
2019/07/09 职场文书