vue 使用生命周期进行实时计算价格(模拟一个购物车)

这篇博客展示了如何使用Vue.js实现购物车功能,包括商品的增删、数量的加减以及全选功能。作者通过Vue的生命周期钩子实时计算购物车总价,并提供了详细的代码示例,展示了如何处理商品的增删操作和总价的动态更新。此外,博客还包含了商品的图片展示和单价显示等细节。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

不仅仅有计算价格功能,以及有删除功能,批量删除功能,全选框,商品数量加减,商品增加(因为是模拟,所以我就设了几个输入框新增)。

实时计算购物车价格,使用vue的生命周期,进行计算,先放两张效果图

 然后我进行新增商品和改变数量,注意总价格(图片不显示是因为我乱写的

下面是我的代码:

<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>增减购物车商品信息 </title>

    <script src="/vue.js"></script>
    <script src="/axios-0.18.0.js"></script>

    <style type="text/css">
        * {
            font-size: 12px;
        }
    </style>

</head>

<body>
    <div id="baba">
        <table border="1" cellpadding="0" cellspacing="0">
            <tr>
                <th><input type='checkbox' @click="changeAll" v-model="allcheck" />全选</th>
                <th>商品信息</th>
                <th>宜美惠价</th>
                <th>数量</th>
                <th>操作</th>

            </tr>
            <tbody v-for="(value, key) in object" :key="key">
                <tr class="tr_0">
                    <td>
                        <input type="checkbox" v-model="value.ischeck" @click="changeOne(key)" />
                    </td>
                    <td>
                        <img v-bind:src="value.godImg" class="products" /><a href="#">{{value.godName}}</a>
                    </td>
                    <td>¥{{value.godPrice}}元
                    </td>
                    <td>
                        <img src="images/subtraction.gif" width="20" height="20" @click="jian(key,value.godNum)" />
                        <input type="text" class="quantity" v-bind:value="value.godNum" v-model.number="value.godNum" />
                        <img src="images/add.gif" width="20" height="20" @click="jia(key,value.godNum)" />
                    </td>
                    <td>
                        <a href="#" class="del" @click="del(key)">删除</a>
                    </td>
                </tr>

            </tbody>
        </table>

        <a href="#" class="add" @click="add()">添加</a>
        <a href="#" @click="dele">删除</a>
        <a>总价格</a>{{total}}<br>
        商品名称:<input type="text" v-model="name"><br>
        商品图片:<input type="text" v-model="img"><br>
        商品价格:<input type="text" v-model="price"><br>
        商品数量:<input type="text" v-model="num"><br>
    </div>
    <script>
        new Vue({
            el: '#baba',
            data() {
                return {
                    object: [
                        {
                            godId: 001,
                            godName: '天堂雨伞',
                            godPrice: 32.9,
                            godNum: 1,
                            ischeck: false, //默认为false
                            godImg: 'images/sang.gif'
                        },
                        {
                            godId: 002,
                            godName: '苹果手机iphone5',
                            godPrice: 3339,
                            godNum: 1,
                            ischeck: false, //默认为false
                            godImg: 'images/iphone.gif'
                        }
                    ],
                    allcheck: false,
                    id: '',
                    name: '',
                    price: '',
                    num: '',
                    img: '',
                    total: 0
                }
            },
            methods: {
                jian: function (key, num) {//减数量 key需要减数量的对象下标
                    if (num <= 1) {
                        alert("不能再减了")
                    } else {
                        this.object[key].godNum = this.object[key].godNum - 1;

                    }
                },
                jia: function (key, num) {//加数量 key需要加数量的对象下标
                    this.object[key].godNum = this.object[key].godNum + 1;
                },
                del: function (key) {//删除方法
                    this.object.splice(key, 1);//删除已完成的数组记录
                },
                //点击购物车数据中单选框改变ischeck事件
                changeOne: function (index) {

                    this.object[index].ischeck = !this.object[index].ischeck;//用户点击单个,将值变成true
                    //判断全选框是否选中
                    /* findIndex() 方法为数组中的每个元素都调用一次函数执行:
                    当数组中的元素在测试条件时返回 true 时, findIndex() 返回符合条件的元素的索引位置,之后的值不会再调用执行函数。
                    如果没有符合条件的元素返回 -1 */
                    let _index = this.object.findIndex(item => {
                        return !item.ischeck
                    })
                    //_index..值由ischeck决定,当ischeck为false时,!ischeck就是ture,ischeck=true(就是代表选中了)时,_index+1
                    //当所有ischeck都为ture(就是都选了),则返回-1
                    if (_index == -1) {
                        this.allcheck = true;
                    } else {
                        this.allcheck = false;
                    }
                },
                changeAll: function () {
                    //取反
                    this.allcheck = !this.allcheck
                    // 遍历数组arr
                    this.object.forEach(item => {
                        return item.ischeck = this.allcheck;
                    })
                },  
                add: function () {//新增商品方法
                    
                    let l = this.object.length;
                    this.object.push({
                        godId: this.id,
                        godName: this.name,
                        godPrice: this.price,
                        godNum: this.num,
                        ischeck: false,
                        godImg: this.img
                    });
                    let i = this.object.length;
                    if (i > l) {
                        alert("添加成功");
                    }
                },
                dele: function () {
                    //说明:数组的filter还有删除的功能,过滤就是筛选,删除不符合条件的,留下符合条件的,
                    //filter括号内部理解成留下符合条件的,本质也是逐个遍历,利用for if判断,组成新的数组,以后遇到这样的情况,就用filter
                    this.object = this.object.filter(god => !god.ischeck)
                }
            },
            //生命周期:一进来就计算价格
            mounted: function () {
                var arr = [];//定义数组准备接收所有单个商品的总价格
                this.object.forEach(item => {//循环
                    return arr.push(item.godPrice * item.godNum);//写入数组所有单个商品的总价格
                })
                var sum = arr.reduce((x, y) => x + y);//计算总价格
                this.total = sum;
            },
            //生命周期:只要任何数据更新,就会执行这个方法更新价格
            beforeUpdate: function () {
                 var arr = [];//定义数组准备接收所有单个商品的总价格
                this.object.forEach(item => {//循环
                    return arr.push(item.godPrice * item.godNum);//写入数组所有单个商品的总价格
                })
                var sum = arr.reduce((x, y) => x + y);//计算总价格
                this.total = sum; 
            },
            
        })

    </script>
</body>
</html>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值