vue实现购物车

vue实现购物车功能根据增加商品数量、减少商品数量、移除商品动态更新总价格<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>购物车</title><link rel="stylesheet" href="css/shop.css">&

小白学习日记

6181人浏览 · 2022-02-10 17:25:42

小白学习日记 · 2022-02-10 17:25:42 发布

vue实现购物车功能
根据增加商品数量、减少商品数量、移除商品动态更新总价格
在这里插入图片描述
html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>购物车</title>
    <link rel="stylesheet" href="css/shop.css">
</head>
<body>
<div id="app">
    <!--template是一个字符串模板，以list的长度判断-->
    <template v-if="list.length">
        <table>
            <thread>
                <tr>
                    <th></th>
                    <th>商品名称</th>
                    <th>商品单价</th>
                    <th>购买数量</th>
                    <th>操作</th>
                </tr>
            </thread>
            <tbody>
            <!--v-for=“list in lists”:从lists这个集合里面遍历出的每一项list-->
                <tr v-for="(item,index) in list">
                    <!--v-for里面有三个参数
                    <div v-for="(value, name, index) in object">
                         可选项：
                         {{ index下标/索引 }}. {{ name键 }}: {{ value值 }}
                    </div>
                    index+1是因为list下标从0开始
                    -->
                    <td>{{index + 1}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.price}}</td>
                    <td>
                        <!--@click是语法糖写法
                        ：disabled也是v-bind的语法糖写法
                        item.count===1：购物车数量减到1就禁用此按钮
                        index：传入当前行的index
                        -->
                        <button @click="handleReduce(index)" :disabled="item.count ===1">-</button>
                        {{item.count}}
                        <button @click="handleAdd(index)">+</button>
                    </td>
                    <td>
                        <button @click="handleRemove(index)">移除</button>
                    </td>
                </tr>
            </tbody>
        </table>
        <!--这里是用的computed属性计算总价格-->
        <div>总价：￥{{totalPrice}}</div>
    </template>
    <!--如果list长度为0显示此信息-->
    <div v-else>购物车为空</div>
</div>

<script src="../js/vue.min.js"></script>
<script src="js/shop.js"></script>
</body>
</html>

let app = new Vue({
    el: '#app',
    data: {
        list: [
            {
                id: 1,
                name: 'Huawei',
                price: 6188,
                count: 1
            },
            {
                id: 2,
                name: '锤子',
                price: 5888,
                count: 1
            },
            {
                id: 3,
                name: '荣耀',
                price: 6000,
                count: 1
            }
        ]
    },
    //计算
    computed: {
        totalPrice: function (){
            //总价格
            let total = 0;
            for(let i=0;i<this.list.length;i++){
                let item = this.list[i];
                //数量*价格
                total += item.price * item.count;
            }
            //正则表达式，每3位添加","作为分割符
            return total.toString().replace(/\B(?=(\d{3})+$)/g,',');}
    },
    methods: {
        /*
        * 商品减减方法
        * param： index 当前商品索引
        * */
        handleReduce: function(index){
            //如果
            if (this.list[index].count === 1) return;
            this.list[index].count--;
        },
        /**
         * 商品添加方法
         * @param index
         */
        handleAdd: function (index){
            this.list[index].count++;
        },
        /**
         * 商品移除方法
         * @param index
         * splice方法可以用来对js的数组进行删除，添加，替换等操作
         * 删除功能，第一个参数为第一项位置，第二个参数为要删除几个
         */
        handleRemove: function (index){
            this.list.splice(index,1);
        }
    }
})

css

table {
    border: 1px solid #e9e9e9;
    border-collapse: collapse;
    border-spacing: 0;
    empty-cells: show;
}
th,td {
    padding: 8px 16px;
    border: 1px solid #e9e9e9;
    text-align: left;
}
th {
    background: #f7f7f7;
    color: #5c6b77;
    font-weight: 600;
    white-space: nowrap;
}