Vue.js实现购物车功能简单拓展（商品数量的变化、总价的变化）

蔚落 2023-09-25 18:48 17阅读 0赞

**目录**

任务描述：

效果图：

代码如下：

--------------------

## 任务描述： ##

> 点击数量按钮实现商品数量的变化，同时商品的总价和合计金额随之发生改变。此外，当商品的数量小于1时触发弹窗警告。

## 效果图： ##

![be02f39134d5479c805212fccedbabe8.jpeg][]

## 代码如下： ##

<body>
        <div id="shoppingCart">
            <table border="1">
                <thead>
                    <tr>
                        <th>
                            名称
                        </th>
                        <th>
                            单价
                        </th>
                        <th>
                            数量
                        </th>
                        <th>
                            总价
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(value, index) in phoneInfo">
                        <th>
                            {
       {value.name}}
                        </th>
                        <th>
                            {
       {value.price}}
                        </th>
                        <th>
                            <button @click="sub(index)">-</button>
                            <input type="text" v-model="value.count">
                            <button @click="add(index)">+</button>
                        </th>
                        <th>
                            {
       {value.price * value.count}}
                        </th>
                    </tr>
                    <tr>
                        <th>
                            合计：{
       {calu}}
                        </th>
                    </tr>
                </tbody>
            </table>
        </div>
        <script>
            var vm = new Vue({
                el: '#shoppingCart',
                data: {
                    phoneInfo: [
                        {
                            name: '商品01',
                            price: 12345,
                            count: 1
                        },
                        {
                            name: '商品02',
                            price: 23456,
                            count: 1
                        }
                    ]
                },
                computed: {
                    calu: function () {
                        var total = 0;
                        this.phoneInfo.forEach(function (s) {
                            total += s.price * s.count;
                        });
                        retuen total;
                    }
                },
                methods: {
                    add: function (index) {
                        this.phoneInfo[index].count++;
                    },
                    sub: function (index) {
                        if (this.phoneInfo[index].count > 1) {
                            this.phoneInfo[index].count--;
                        } else {
                            alert("数量不能为0");
                        }
                    }
                }
            })
        </script>
    </body>

**觉得还不错就给个赞吧！**

[be02f39134d5479c805212fccedbabe8.jpeg]: https://img-blog.csdnimg.cn/be02f39134d5479c805212fccedbabe8.jpeg