位置: IT常识 - 正文
vue实现购物车功能(vue写的购物车详细步骤)
编辑：rootadminvue实现购物车功能 
本文链接地址:https://www.jiuchutong.com/zhishi/297608.html
转载请保留说明！
推荐整理分享vue实现购物车功能(vue写的购物车详细步骤)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:vue实现购物车功能案例,vue购物车功能代码解析,vue购物车功能实现思路,vue实现购物车功能,vue购物车功能实现代码,vue实现购物车功能案例,vue实现购物车功能案例,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>上一篇：占有统治地位的Transformer究竟是什么(占统治地位的英文短语)
下一篇：被称为下一代风口的AIGC到底是什么？(被称为下一代风华的是)
