如何用vue实现可改变购物数量的购物车
导读：本文共1797字符，通常情况下阅读需要6分钟。同时您也可以点击右侧朗读，来听本文内容。按键盘←（左） →（右） 方向键可以翻页。
摘要：这篇“如何用vue实现可改变购物数量的购物车”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“如何用vue实现可改变购物数量的购物车”文章吧。效果图：知识点：1.computed 计算属性2.filters 过滤器实现代码：<!DOCTYPEhtml><html>... ...
音频解说
目录
(为您整理了一些要点),点击可以直达。这篇“如何用vue实现可改变购物数量的购物车”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“如何用vue实现可改变购物数量的购物车”文章吧。
效果图：
知识点：
1.computed 计算属性
2.filters 过滤器
实现代码：
<!DOCTYPEhtml><html><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Document</title></head><scriptsrc="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><style>table{border-collapse:collapse;border-spacing:0;border:1pxsolid#ccc;}td,th{padding:8px16px;border:1pxsolid#ccc;text-align:left;}th{background-color:#f7f7f7;color:#5c6b77;}</style><body><divid="box"><divv-if="books.length"><table><thead><tr><th></th><th>书籍名字</th><th>出版日期</th><th>价格</th><th>购买数量</th><th>操作</th></tr></thead><tbody><trv-for="(item,index)inbooks"><td>{{item.id}}</td><td>{{item.name}}</td><td>{{item.date}}</td><td>{{item.price|toprice}}</td><td><button@click="down(index)":disabled="item.aunt<=1">-</button>{{item.aunt}}<button@click="add(index)">+</button></td><td><button@click="remove(index)">移除</button></td></tr></tbody></table><h2>总价：{{getallprice|toprice}}</h2></div><h2v-else>您没有购物信息</h2></div><script>constvm=newVue({el:"#box",data:{books:[{id:1,name:"《vue.js实战》",date:"2010.2.4",price:82.00,aunt:1},{id:2,name:"《javascript实战》",date:"2010.2.4",price:108.00,aunt:1},{id:3,name:"《html+css实战》",date:"2010.2.4",price:42.50,aunt:1},{id:4,name:"《axios实战》",date:"2010.2.4",price:82.00,aunt:1},{id:5,name:"《jquery实战》",date:"2010.2.4",price:65.20,aunt:1},]},methods:{add(index){this.books[index].aunt++;},down(index){this.books[index].aunt--;},remove(index){this.books.splice(index,1)},},computed:{getallprice(){letall=0;for(leti=0;i<this.books.length;i++){all+=this.books[i].price*this.books[i].aunt}returnall}},filters:{toprice(price){return"￥"+price.toFixed(2)},}})</script></body></html>以上就是关于“如何用vue实现可改变购物数量的购物车”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注亿速云行业资讯频道。
本文：
如何用vue实现可改变购物数量的购物车的详细内容，希望对您有所帮助，信息来源于网络。