Vue实现简易购物车功能

大聪明码农徐

已于 2022-03-18 00:10:19 修改

阅读量1.4k

点赞数 2

分类专栏： Vue 文章标签：前端 vue.js javascript

于 2022-03-18 00:07:20 首次发布

本文链接：https://blog.csdn.net/qq_45799465/article/details/123564031

版权

Vue 专栏收录该内容

11 篇文章 6 订阅

订阅专栏

效果演示：

代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        li{
            list-style: none;
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 500px;
            height: 100px;
        }
        ul li input{
            width: 15px;
            text-align: center;
        }
        ul li img{
            width: 80px;
            height: 80px;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- 全选框 -->
        <input type="checkbox" v-model="checkedAll" @change="checkboxAll">
        <ul>
            <!-- 循环遍历数组goods -->
            <li v-for="(item,index) in goods">
                <input type="checkbox" v-model="checkedOther" :value="item.id" @change="checkboxOther">
                <img :src="item.pic" alt="">
                <span>
                <p>商品名：{{item.name}}</p>
                <p>商品价格：{{item.price}}</p>
                </span>
                <!-- :disabled ="item.num === 1" 设置禁用属性 最小值 -->
                <button @click="subtract(item)" :disabled ="item.num === 1" >-</button>
                <input type="text" v-model="item.num">
                <!-- :disabled = "item.limit === item.num" 最大值 -->
                <button @click="add(item)" :disabled = "item.limit === item.num">+</button>
                <p>小计：{{subtotal(item)}}</p>
                <button @click="del(index)">删除</button>
            </li>
        </ul>
        <h2>总计：{{total}} </h2>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                checkedAll:false,
                total:0,
                checkedOther:[],
                goods:[
                {
                        "id":0,
                        "name":"商品1",
                        "price":10,
                        "num":1,
                        "limit":5,            
                        "pic":"https://static.maizuo.com/pc/v5/usr/movie/44dc08914d508fc47c8267c6ca73f2d8.jpg"
                    },
                    {
                        "id":1,
                        "name":"商品2",
                        "price":20,
                        "num":2,
                        "limit":5,
                        "pic":"https://static.maizuo.com/pc/v5/usr/movie/44dc08914d508fc47c8267c6ca73f2d8.jpg"
                    },
                    {
                        "id":2,
                        "name":"商品3",
                        "price":30,
                        "num":3,
                        "limit":5,
                        "pic":"https://static.maizuo.com/pc/v5/usr/movie/44dc08914d508fc47c8267c6ca73f2d8.jpg"
                    }
                ]
                
            },
            methods:{
                // 全选单选函数
                checkboxAll(){
                    console.log(this.checkedAll);
                    // 如果this.checkedAll为true 则循环遍历goods数组中的id属性写入 this.checkedOther
                    // 全选
                    if(this.checkedAll){
                        this.goods.forEach(element => {
                            this.checkedOther.push(element.id)
                        });
                    }else{
                        // 如果this.checkedAll为false，则赋值空数组
                        // 全不选
                        this.checkedOther = [];
                    }
                    // 单选全选改变，重新计算总价
                    this.getTotal();
                },
                // 单选函数
                checkboxOther(){
                    //  当this.checkedOther数组的长度等于this.goods数组的长度
                    //  则说明全部选中 
                    if(this.checkedOther.length === this.goods.length){
                        this.checkedAll = true;
                    }else{
                        // 否则就是未选中
                        this.checkedAll = false;
                    }
                    // 单选全选改变，重新计算总价
                    this.getTotal();

                },
                // 购买数量增加 
                add(item){
                    item.num++
                    // 一旦数值改变，重新计算总价
                    this.getTotal();
                },
                // 购买数量减少
                subtract(item){
                    item.num--
                    // 一旦数值改变，重新计算总价
                    this.getTotal();
                },
                // 计算总价函数
                getTotal() {
                    this.total = 0;
                    // 循环遍历数组中选中的商品
                    this.goods.forEach(item => {
                        // 查询this.checkedOther 中是否有id属性，有说明被选中
                        // 执行this.total的加等操作
                        if (this.checkedOther.indexOf(item.id) != -1) {
                            this.total += item.price * item.num;
                        }
                    })
                },
                // 删除
                del(index){
                    if(confirm('确定删除这个商品吗？'))
                    this.goods.splice(index,1)
                }

            },
            // computed计算属性
            computed: {
                // 小计 这里可以用函数的形式去写
                // 但博主想联系一下计算属性传参
                // 因此用计算属性去写
                subtotal(){
                    return function(item){
                        return item.price*item.num 
                    }
                },
            }
        })
    </script>
</body>
</html>