Vue怎么实现购物车计算总价功能

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

效果：

代码

html

<div id="app">
        <div class="panel panel-info">
            <div class="panel-heading">
                <h4 class="panel-title">购物车</h4>
            </div>
            <div class="panel-body">

                <div class="checkbox">
                    <label>
                        <input type="checkbox" v-model="checkAll">
                        全选
                    </label>
                </div>

                <ul class="list-group">
                    <li class="list-group-item" v-for="(item) in list" :key="item.id">
                        <div class="checkbox">
                            <label>
                                <input type="checkbox" v-model="item.checked">
                                {{item.name}}--{{item.price}}*{{item.quantity}}
                                <button type="button" @click="item.quantity>1?item.quantity-=1:1"
                                    class="btn btn-success">-</button>
                                <button type="button" @click="item.quantity+=1" class="btn btn-success">+</button>
                            </label>
                        </div>
                    </li>
                </ul>
                <p>总价：{{sumPrice}}</p>
            </div>
        </div>
</div>

js

<script src="./libs/vue.js"></script>
    <script>
        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))
                }
            }
        })
</script>

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

<link rel="stylesheet" href="./bootstrap.min.css" rel="external nofollow" >

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