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 相关文章推荐
Vue3配置axios跨域实现过程解析
Nov 25 Vue.js
vue中如何自定义右键菜单详解
Dec 08 Vue.js
vue3.0自定义指令(drectives)知识点总结
Dec 27 Vue.js
vue.js watch经常失效的场景与解决方案
Jan 07 Vue.js
vue组件是如何解析及渲染的?
Jan 13 Vue.js
vue-cli中实现响应式布局的方法
Mar 02 Vue.js
Vue多选列表组件深入详解
Mar 02 Vue.js
一文带你理解vue创建一个后台管理系统流程(Vue+Element)
May 18 Vue.js
VUE使用draggable实现组件拖拽
Apr 06 Vue.js
Vue.Draggable实现交换位置
Apr 07 Vue.js
Vue ECharts实现机舱座位选择展示功能
May 15 Vue.js
vue ant design 封装弹窗表单的使用
Jun 01 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
PHP开发需要注意的安全问题
2010/09/01 PHP
FastCGI 进程意外退出造成500错误
2015/07/26 PHP
PHP数组操作简单案例分析
2016/10/15 PHP
PHP+Ajax无刷新带进度条图片上传示例
2017/02/08 PHP
JavaScript 高级篇之函数 (四)
2012/04/07 Javascript
JQuery入门——用one()方法绑定事件处理函数(仅触发一次)
2013/02/05 Javascript
JQuery onload、ready概念介绍及使用方法
2013/04/27 Javascript
再探JavaScript作用域
2014/09/24 Javascript
JavaScript中模拟实现jsonp
2015/06/19 Javascript
一不小心就做错的JS闭包面试题
2015/11/25 Javascript
原生JS实现平滑回到顶部组件
2016/03/16 Javascript
vue.js指令v-for使用及索引获取
2016/11/03 Javascript
基于Three.js插件制作360度全景图
2016/11/29 Javascript
Bootstrap如何激活导航状态
2017/03/22 Javascript
vue项目中使用axios上传图片等文件操作
2017/11/02 Javascript
常用的 JS 排序算法 整理版
2018/04/05 Javascript
webstorm和.vue中es6语法报错的解决方法
2018/05/08 Javascript
node中间层实现文件上传功能
2018/06/11 Javascript
微信JS-SDK updateAppMessageShareData安卓不能自定义分享详解
2019/03/29 Javascript
JavaScript canvas仿代码流瀑布
2020/02/10 Javascript
vue 解决兄弟组件、跨组件深层次的通信操作
2020/07/27 Javascript
python目录与文件名操作例子
2016/08/28 Python
Python中安装easy_install的方法
2018/11/18 Python
Python最小二乘法矩阵
2019/01/02 Python
Python range、enumerate和zip函数用法详解
2019/09/11 Python
Python使用configparser读取ini配置文件
2020/05/25 Python
HTML5 Canvas的性能提高技巧经验分享
2013/07/02 HTML / CSS
Hotels.com台湾:饭店订房网
2017/09/06 全球购物
为什么使用接口?
2014/08/13 面试题
艺术系大学生毕业个人自我评价
2013/09/19 职场文书
师说教学反思
2014/02/07 职场文书
学习雷锋精神演讲稿
2014/05/10 职场文书
小学优秀教师先进事迹材料
2014/12/16 职场文书
Ajax异步刷新功能及简单案例
2021/11/20 Javascript
剖析后OpLog订阅MongoDB的数据变更就没那么难了
2022/02/24 MongoDB
世界十大儿童漫画书排名,法国国宝漫画排第五,第二是轰动日本连环
2022/03/18 欧美动漫