How to realize the function of calculating the total price of shopping cart by Vue

本文小编为大家详细介绍"Vue怎么实现购物车计算总价功能"，内容详细，步骤清晰，细节处理妥当，希望这篇"Vue怎么实现购物车计算总价功能"文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

效果：

代码

html

购物车 全选 {{item.name}}--{{item.price}}*{{item.quantity}} - +

总价：{{sumPrice}}

js

new Vue({ el: "#app", data: { list: [ { id: 1, name: "小米10", price: 3999, checked: false, quantity: 1 }, { id: 2, name: "荣耀30", price: 2999, checked: false, quantity: 1 }, { id: 3, name: "魅族17", price: 3699, checked: false, quantity: 1 }, { id: 4, name: "苹果11", price: 5499, checked: false, quantity: 1 } ], }, // computed计算属性， // 他有一个特点，可以依赖当前数据改变之后进行重新计算 computed: { checkAll: { //设置值，当点击全选按钮的时候触发 set(v) { this.list.forEach((item) => (item.checked = v)) }, //取值，当列表中的值改变之后触发，需要return get() { return ( this.list.length === this.list.filter((item) => item.checked).length ) } }, //计算总价，选择被选中的元素 sumPrice() { return this.list.filter((item) => item.checked).reduce((pre, cur) => { return pre + cur.price * cur.quantity }, 0) }, }, methods: { save() { console.log(this.list.filter((item) => item.checked)) } } })

结构是用bootstrap写的，记得下载并引入文件

读到这里，这篇"Vue怎么实现购物车计算总价功能"文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注行业资讯频道。