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 tags 创建缓存导航的过程实现
Dec 03 Vue.js
vue-calendar-component 封装多日期选择组件的实例代码
Dec 04 Vue.js
Vue实现摇一摇功能(兼容ios13.3以上)
Jan 26 Vue.js
Vue基本指令实例图文讲解
Feb 25 Vue.js
vue脚手架项目创建步骤详解
Mar 02 Vue.js
vue路由实现登录拦截
Mar 24 Vue.js
Vue的过滤器你真了解吗
Feb 24 Vue.js
vue使用echarts实现折线图
Mar 21 Vue.js
vue实现省市区联动 element-china-area-data插件
Apr 22 Vue.js
详解Vue3使用axios的配置教程
Apr 29 Vue.js
vue-treeselect的基本用法以及解决点击无法出现拉下菜单
Apr 30 Vue.js
Vue Mint UI mt-swipe的使用方式
Jun 05 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
DC漫画《蝙蝠侠和猫女》图透 猫女怀孕老爷当爹
2020/04/09 欧美动漫
php+iframe实现隐藏无刷新上传文件
2012/02/10 PHP
非常全面的php日期时间运算汇总
2015/11/04 PHP
yii数据库的查询方法
2015/12/28 PHP
ExtJs 3.1 XmlTreeLoader Example Error
2010/02/09 Javascript
js以对象为索引的关联数组
2010/07/04 Javascript
json对象转字符串如何实现
2012/12/02 Javascript
js对象内部访问this修饰的成员函数示例
2014/04/27 Javascript
JS自定义对象实现Java中Map对象功能的方法
2015/01/20 Javascript
JS实现带缓冲效果打开、关闭、移动一个层的方法
2015/05/09 Javascript
javascript实现图片跟随鼠标移动效果的方法
2015/05/13 Javascript
浅析Jquery操作select
2016/12/13 Javascript
jQuery中extend函数简单用法示例
2017/10/11 jQuery
利用vue和element-ui设置表格内容分页的实例
2018/03/02 Javascript
通过封装scroll.js 获取滚动条的值
2018/07/13 Javascript
对Vue.js之事件的绑定(v-on: 或者 @ )详解
2018/09/15 Javascript
JavaScript的查询机制LHS和RHS解析
2019/08/16 Javascript
vue的滚动条插件实现代码
2019/09/07 Javascript
javascript设计模式 ? 模板方法模式原理与用法实例分析
2020/04/23 Javascript
Python中用post、get方式提交数据的方法示例
2017/09/22 Python
Python中Scrapy爬虫图片处理详解
2017/11/29 Python
python爬虫的数据库连接问题【推荐】
2018/06/25 Python
Python文件监听工具pyinotify与watchdog实例
2018/10/15 Python
python pygame实现方向键控制小球
2019/05/17 Python
selenium+python实现自动登陆QQ邮箱并发送邮件功能
2019/12/13 Python
TFRecord文件查看包含的所有Features代码
2020/02/17 Python
vue学习笔记之动态组件和v-once指令简单示例
2020/02/29 Python
详解Canvas 跨域脱坑实践
2018/11/07 HTML / CSS
英国复古皮包品牌:Beara Beara
2018/07/18 全球购物
2014新年元旦活动策划方案
2014/02/18 职场文书
端午节活动策划方案
2014/03/09 职场文书
教室布置标语
2014/06/26 职场文书
体育课外活动总结
2014/07/08 职场文书
故宫导游词
2015/01/31 职场文书
教你用Python爬取英雄联盟皮肤原画
2021/06/13 Python
Redis特殊数据类型bitmap位图
2022/06/01 Redis