vue 简单的购物车页面案例

1.效果2.实现的功能（1）点击全选购物车所有的商品均被选中，并计算出总金额（2）取消全选，金额为 0。（3）增加购物车页面商品的数量，总金额也跟随变化。（4）购物车商品限购（5）删除商品3.实现步骤：（1）从后台拿到加入了购物车商品的信息。为一个数组。（2）新建一个列表，用 v-for 遍历这个数组(3) 给全选按钮添加勾选状态，以及每一单项的状态改变事件（4）给按钮添加点击事件和禁止按钮条件。

Drizzlejj

5601人浏览 · 2021-12-27 13:18:09

Drizzlejj · 2021-12-27 13:18:09 发布

1.效果

2.实现的功能

（1）点击全选购物车所有的商品均被选中，并计算出总金额

（2）取消全选，金额为 0。

（3）增加购物车页面商品的数量，总金额也跟随变化。

（4）购物车商品限购

（5）删除商品

3.实现步骤：

（1）从后台拿到加入了购物车商品的信息。为一个数组。

（2）新建一个列表，用 v-for 遍历这个数组

(3) 给全选按钮添加勾选状态，以及每一单项的状态改变事件

（4）给按钮添加点击事件和禁止按钮条件。

（5）计算总金额。

（6）添加删除事件，，并同步更新状态改变事件。

4.上码

<!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="./vue.js"></script>
    <style>
        *{margin: 0;padding: 0;}
        #content{
            width: 100%;height: 100%;
        }
        .head{
            height: 60px;
            margin: 30px 30px;
        }
        ul li{
            display: flex;
            justify-content: space-around;
            align-items: center;
            margin-bottom: 30px;
        }
        li img{width: 80px;height: 120px;}
        footer >p{
            margin-left: 30px;
            float: left;
        }
        footer >div{
            margin-right: 30px;
            float:right;
        }
    </style>
</head>
<body>
    <div id="box">
        <div id="content">
            <div class="head">
                <!-- v-model 绑定勾选状态  change() 绑定一个状态改变的事件，状态改变时就触发这个事件-->
                <input v-model ="isAll" @change ="handleChangeAll()" type="checkbox"> 全选/全不选
            </div>
            <ul>
                <li v-for = "(items,index) in goods" :key = "items.id">
                    <div>
                        <!-- v-model 绑定勾选状态 change() 绑定一个状态改变的事件，状态改变时就触发这个事件-->
                        <!-- :value="items" 拿到勾选了的内容，方便接下来用勾选了的内容里面包含的价格和数量算总金额。 -->
                        <input type="checkbox" v-model = "checklist" :value="items" @change = "handleChange()">
                    </div>
                    <img :src="items.pic" alt="">
                    <div>
                        <div>{{items.name}}</div>
                        <div style="color: red;">${{items.price}}</div>
                    </div>
                    <div>
                        <!-- 当 items.number === 1时，disabled 为真，禁用这个按钮 -->
                        <button @click = "items.number--" :disabled = "items.number === 1">-</button>
                        <span>{{items.number}}</span>
                        <button @click = "items.number++" :disabled = "items.number === items.limit">+</button>
                    </div>
                    <div>
                        <!-- 绑定一个事件，删除 goods列表 中的 第index 项 -->
                        <button @click = "handleDeleteClick(index,items.id)">删除</button>
                    </div>
                </li>
            </ul>
            <footer>
                <p>合计:{{sum()}}</p>
                {{checklist}}
                <div>去付款</div>
            </footer>
        </div>
    </div>
    <script>
        new Vue({
            el:'#box',
            data:{
                isAll:false,
                checklist:[], // 拿到勾选了的商品
                goods:[
                    {
                        name:'JMSHOP 清纯校花 白色针织开衫慵懒风秋装女宽松仿貂毛毛衣外套',
                        price:40,
                        number:1,
                        id:1,
                        limit:5,
                        pic:"../js/img/shop.jpg"
                    },
                    {
                        name:'d/z shop 复古挂脖针织衫女秋装一字领露肩纯欲黑色修身打底上衣',
                        price:30,
                        number:1,
                        id:2,
                        limit:3,
                        pic:"../js/img/shop2.jpg"
                    },
                    {
                        name:'d/z shop 复古挂脖针织衫女秋装一字领露肩纯欲黑色修身打底上衣',
                        price:20,
                        number:1,
                        id:3,
                        limit:4,
                        pic:"../js/img/shop3.jpg"
                    },
                    {
                        name:'d/z shop 复古挂脖针织衫女秋装一字领露肩纯欲黑色修身打底上衣',
                        price:10,
                        number:1,
                        id:4,
                        limit:5,
                        pic:"../js/img/shop4.jpg"
                    },
                ]
            },
            methods:{
                sum(){
                    var total = 0
                    this.checklist.forEach(items => {
                        total += items.price * items.number    
                    });
                    return total
                },
                handleDeleteClick(index,id){
                    // 删除 goods 列表中的 第 index 项
                    this.goods.splice(index,1)
                    // 当  checklist 中的 某一个 items 的 id = 删除的 goods 列表第 index 项的 id 时，
                    // 把checklist 这一项过滤掉，然后重新生成 checklist 
                    this.checklist = this.checklist.filter(items => items.id !==id)
                    // 每点击删除事件时，触发 handleChange() 事件
                    this.handleChange()
                },
                handleChangeAll(){
                    if(this.isAll){
                        this.checklist = this.goods
                    }else{
                        this.checklist = []
                    }
                },
                handleChange(){
                    if(this.checklist.length === this.goods.length){
                        this.isAll = true
                    }else{this.isAll = false}
                }
            }
        })
    </script>
</body>
</html>