vuex购物车（vue实现购物车功能）

         随着时代发展               ，网购成了人们必不可少的一部分  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
，所以我们常常遇到要实现购物车功能














，如下图
  
  
  
  
  
  
  
 ，我们来分析一下 下图所示页面:

        首先  
  
  
  
  
  
  
 ，我们通过ElementUI中的<el-table>标签来实现页面的呈现               。

        其次
 


 


 


 


 


 


 


 
，我们可以看到“价格               ”列和“总价  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
”是由"￥"+价格 组成
 
 
 
 
 
 
 
，并且价格要保留两位小数

第三   
   
   
   
   
   
   
  ，“购买数量














” 点击‘-’号按钮时不能小于1

        第四
 

 

 

 

 

 

 

 
，当所有商品都被移除时

 

 

 

 

 

 

 
，显示‘购物车为空’

购物车有数据时：

 购物车无数据时：

         在代码中                ，我们利用了过滤器来实现“价格
  
  
  
  
  
  
  
 ”和‘总价’的拼接
 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
，通过toFixed()方法实现保留两位小数














，通过disabled属性来实现当数量小于等于1时                       ，不再进行数量减法 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
，通过计算属性computed来实现总价的计算






















，通过splice()方法来实现移除功能  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
。下面让我们上代码：

<template> <div> <h1>购物车</h1> <div v-if="tableData.length"> <el-table :data="tableData" style="width: 100%"> <el-table-column type="index" width="50" align="center" header- align="center"> </el-table-column> <el-table-column prop="name" label="书籍名称" width="180" align="center" header-align="center"> </el-table-column> <el-table-column prop="press" label="出版社" width="180" align="center" header-align="center"> </el-table-column> <el-table-column prop="price" label="价格" width="180" align="center" header-align="center"> <template slot-scope="scope"> <div>{{ scope.row.price | showPrice}}</div> </template> </el-table-column> <el-table-column prop="count" label="购买数量" width="180" align="center" header-align="center"> <template slot-scope="scope"> <div style="display: flex;align-items: center;justify-content: center;"> <el-button size="small" @click="decrement(scope.$index)" :disabled="scope.row.count <= 1">-</el-button> <div style="width: 50px;">{{scope.row.count}}</div> <el-button size="small" type="primary" @click="increment(scope.$index)">+</el-button> </div> </template> </el-table-column> <el-table-column label="操作" width="120" align="center" header- align="center"> <template slot-scope="scope"> <el-button type="danger" size="small" @click="removeHandle(scope.$index)"> 移除 </el-button> </template> </el-table-column> </el-table> <h2>总计：{{totalPrice | showPrice}}</h2> </div> <div v-else>购物车为空</div> </div> </template> <script> export default { data() { return { tableData: [ { name:《C Primer Plus》, press:人民邮电出版社, price:155.00, count:1 }, { name:《计算机系统基础》, press:机械工业出版社, price:100.00, count:1 }, { name:《深入浅出Vue.js》, press:人民邮电出版社, price:200.00, count:1 }, { name:《算法》, press:人民邮电出版社, price:250.00, count:1 } ], } }, computed: { totalPrice() { //计算总价 let total = 0; for(let i in this.tableData){ total += this.tableData[i].price * this.tableData[i].count; } return total } }, filters:{ //过滤器 // 拼接价格/总价 showPrice(price){ return ￥+ price.toFixed(2); } }, methods: { increment(index){//加 this.tableData[index].count++ }, decrement(index){//减 this.tableData[index].count-- }, removeHandle(index){//移除 this.tableData.splice(index,1); } } } </script>