Vue购物车案例

原创已于 2022-04-11 17:56:18 修改 · 1k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#vue

于 2022-04-11 17:55:22 首次发布

这是一个使用Vue.js实现的购物车实战案例，包括全选/不全选功能、商品列表展示、数量增减及删除操作，同时展示了总价的实时计算。代码清晰，可直接运行。

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

干货全拿走，代码复制就能跑

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 购物车实战案例</title>
    <style>
        li {
            display: flex;
            justify-content: space-around;
            padding: 10px;
        }

        li img {
            width: 100px;
        }
    </style>
    <script src="https://cdn.staticfile.org/vue/3.0.5/vue.global.js"></script>
</head>
<body>
<div id="example-1" class="demo">
    <div class="title">
        <label><input type="checkbox" v-model="isAll" @change="checkAllList">全选/不全选</label>
    </div>
    <ul>
        <li v-for="(item,index) in datalist" :key="item.id">
            <input type="checkbox" v-model="checkList" :value="item" @change="handleItemChange">
            <img :src="item.pic"/>

            <div>
                <div>{{item.name}}</div>
                <div style="color:red">${{item.price}}</div>
            </div>

            <div>
                <button @click="item.number--" :disabled="item.number === 1">-</button>
                <span>{{item.number}}</span>
                <button @click="item.number++" :disabled="item.number === item.limit">+</button>
            </div>

            <div>
                <button @click="handleDelete(index,item.id)">删除</button>
            </div>
        </li>
    </ul>

    <div>总金额:{{sum()}}</div>
    实时购物车详情：{{checkList}}
</div>

<script>
    const obj = {
        data() {
            return {
                isAll: false,
                // 购物车数据集合
                checkList: [],
                datalist: [{
                    name: "商品1",
                    price: 10,
                    number: 1,
                    id: 1,
                    limit: 5, // 限购
                    pic: "lib/bb4e.png"
                },
                    {
                        name: "商品2",
                        price: 20,
                        number: 2,
                        id: 2,
                        limit: 5,
                        pic: "lib/bb4e.png"
                    },
                    {
                        name: "商品3",
                        price: 30,
                        number: 3,
                        id: 3,
                        limit: 5,
                        pic: "lib/bb4e.png"
                    },
                    {
                        name: "商品1",
                        price: 10,
                        number: 1,
                        id: 4,
                        limit: 5,
                        pic: "lib/bb4e.png"
                    },
                    {
                        name: "商品5",
                        price: 50,
                        number: 5,
                        id: 5,
                        limit: 5,
                        pic: "lib/bb4e.png"
                    }
                ],
            }
        },
        methods: {
            sum() {
                // 初始化总数
                var total = 0;
                // 累加计算CheckList中的 价格*数量
                this.checkList.forEach(item => {
                    total += item.price * item.number
                });
                return total
            },
            // 删除事件
            handleDelete(index, id) {
                console.log("删除：" + index)
                this.datalist.splice(index, 1)
                this.checkList = this.checkList.filter(item => item.id != id)
                // 手动同步一下状态
                this.handleItemChange()
            },
            // 实现全选/不全选
            checkAllList() {
                console.log(this.isAll)
                if (this.isAll) {
                    //
                    this.checkList = this.datalist
                } else {
                    this.checkList = []
                }
            },
            // 全选列表自动勾选全选按钮
            handleItemChange() {
                if (this.checkList.length===this.datalist.length) {
                    this.isAll = true;
                } else {
                    this.isAll = false;
                }
            }
        }
    }

    Vue.createApp(obj).mount('#example-1')
</script>
</body>
</html>