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

最新推荐文章于 2024-01-11 14:31:05 发布

lengleng0107

最新推荐文章于 2024-01-11 14:31:05 发布

阅读量704

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/lengleng0107/article/details/122364609

这篇博客展示了如何使用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>