今天小编跟大家讲解下有关“用Vue框架怎样写一个简单的购物车，基本实现是怎样”的内容 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了相关资料，希望小伙伴们看了有所帮助。

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

简易的购物车小demo

引用了一下bootstrap3，的表格

<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框架怎样写一个简单的购物车，基本实现是怎样”的介绍了，感谢各位的阅读，如果大家想要了解更多相关的内容，欢迎关注群英网络，小编每天都会为大家更新不同的知识。

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• TypeScript怎样使用，能实现哪些功能

  目录一、什么是 TypeScript二、TypeScript 简史三、为什么我们要使用TypeScript？TypeScript的附加功能四、大牛现身说法:五、你可能不知道的TypeScript顶级功能1、面向对象程序设计2、接口、泛型、继承和方法访问修饰符3、编译时/静态类型检查4、比JavaScript代码更少5、

• 用JS怎样实现一个可拖动的展示框效果，方法是什么

  这篇文章主要介绍了JavaScript实现橱窗展示效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

• JS中的NaN产生是怎样，如何辨别NaN

  ​JavaScript中，NaN是一个特殊的数字值（typeof NaN的结果为number），是not a number的缩写，表示不是一个合法的数字。

• vantUI中如何实现获得piker选中值的ID

  这篇文章主要介绍了vantUI 获得piker选中值的自定义ID操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

• Vue实现导出excel表格的方法流程是怎样

  在开发后台管理系统的时候,很多地方都要用到导出excel 表格,比如将table中的数据导出到本地,这篇文章主要给大家介绍了关于Vue导出Excel功能的相关资料,需要的朋友可以参考下