vue购物车小demo

最新推荐文章于 2021-11-17 14:36:30 发布

weixin_42704587

最新推荐文章于 2021-11-17 14:36:30 发布

阅读量82

点赞数

文章标签： vue.js 前端 html5 node.js

本文链接：https://blog.csdn.net/weixin_42704587/article/details/104643576

版权

本文将通过Vue.js实现一个简单的购物车小demo，涵盖了组件化、数据绑定、计算属性和事件处理等核心功能。首先，创建商品列表组件，接着实现点击添加到购物车的功能，然后展示购物车中的商品，并提供数量增减和总价计算。最后，通过HTML5的localStorage持久化购物车数据，确保页面刷新后购物车内容依然存在。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="box">
        全选：<input type="checkbox" @change="handleAllChecked()" v-model="isAllChecked" />
        <ul>
            <li v-for="(data,i) in list" :key="data.id" style="overflow: hidden;">
                <input type="checkbox" :value="data" v-model="checkgroup" style="float: left;"
                    @change="handleItemChange()" />
                <div style="float: left;">
                    <div>{{data.name}}</div>
                    <div>价格:{{data.price}}</div>
                    <!-- <div>数量：{{data.number}}</div> -->
                </div>

                <div style="float: left;margin-left: 20px;">
                    <button @click="handleDel(data)">-</button>
                    {{data.number}}
                    <button @click="data.number++">+</button>
                </div>

                <div style="float: right;">
                    <button @click="deletes(data,i)">remove</button>
                </div>
            </li>
        </ul>

        {{checkgroup}}

        <p>总金额:{{ getSum() }}</p>
    </div>
</body>

</html>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el: "#box",
        data: {
            checkgroup: [],
            isAllChecked: false,
            list: [
                {
                    name: "商品1",
                    price: 10,
                    number: 1,
                    id: "1",
                },
                {
                    name: "商品2",
                    price: 20,
                    number: 2,
                    id: "2",
                },
                {
                    name: "商品3",
                    price: 30,
                    number: 3,
                    id: "3",
                }
            ]
        },
        methods: {
            deletes(data, i) {
                this.list.splice(i, 1)
                var num = this.checkgroup.indexOf(data);
                if (num > -1) {
                    this.checkgroup.splice(num, 1)
                }

                if (this.checkgroup.length === 0) {
                    this.isAllChecked = false
                }
            },
            // 每个chekcbox 改变触发， 判读数组的长度与list长度
            handleItemChange() {
                console.log(this.checkgroup.length)
                if (this.checkgroup.length === this.list.length) {
                    //全选chekcbox勾上
                    this.isAllChecked = true
                } else {
                    // 取消checkbox勾选
                    this.isAllChecked = false
                }
            },

            //全选按钮处理
            handleAllChecked() {
                console.log(this.isAllChecked)
                if (this.isAllChecked) {
                    //全选中
                    this.checkgroup = this.list
                } else {
                    //全不选中
                    this.checkgroup = []
                }
            },
            //商品减少
            handleDel(data) {
                data.number--
                if (data.number === 0) {
                    data.number = 1
                }
            },
            // getName(){
            //   return this.name+"11111111";
            // },
            //计算总金额
            getSum() {
                var sum = 0;
                for (var i in this.checkgroup) {
                    sum += this.checkgroup[i].price * this.checkgroup[i].number
                }
                return sum
            }
        },
    })
</script>