vue实现购物车全选，总计等功能

最新推荐文章于 2024-10-07 17:50:34 发布

nan囡315

最新推荐文章于 2024-10-07 17:50:34 发布

阅读量7.6k

点赞数 14

本文链接：https://blog.csdn.net/hangnan315/article/details/118247515

版权

一、单价商品的小计
整个操作过程是，商品的数量是可以控制的，可增可减，最少为1。并且在数量的变化中，商品的小计也在变化。
二、单选选中商品
在购物车中，需要选择当前想买的商品，这一功能成为商品的单选，并且在选中商品的同时，总金额会累加上选中的商品总价。
三、全选选中商品
全选就是一键选中所有商品，然后总金额是所有商品的总价的总和。取消全选有两个方式：一是直接按取消全选，而是取消任何一个商品的选中。
四、删除商品
在这里插入图片描述

代码如下：

    <style>
        table {
            border: 1px solid #e9e9e9;
            border-collapse: collapse;
            border-spacing: 0;
        }
        #app {
            margin: 0 auto;
        }
        th,
        td {
            padding: 8px 16px;
            border: 1px solid #e9e9e9;
            text-align: left;
            width: 100px;
            text-align: center;
        }
        th {
            background-color: #f7f7f7;
            color: #5c6b77;
            font-weight: 600;
        }
    </style>
</head>
<body>
    <div id="app">
        <div v-if="books.length">
            <table>
                <thead>
                    <tr>
                        <!-- 全选按钮  将按钮的选中状态与data数据中的Allcheck进行绑定，并添加点击事件 -->
                        <th style="text-align:left">全选：<input type="checkbox" :checked="Allcheck" @click="allcheck">
                        </th>
                        <th>Id</th>
                        <th>书籍名称</th>
                        <th>出版日期</th>
                        <th>价格</th>
                        <th>购买数量</th>
                        <th>小计</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <table>
                    <tr v-for="(item,index) in books">
                        <!-- 单选按钮 将单选按钮与商品信息中的check属性进行绑定 添加点击事件 -->
                        <td><input type="checkbox" :checked="item.check" @click="aloncheck(index)"></td>
                        <td>{{item.id}}</td>
                        <td>{{item.name}}</td>
                        <td>{{item.date}}</td>
                        <td>{{item.price | getprice}}</td>
                        <td>
                            <button @click="item.num--" :disabled="item.num<=1">-</button>
                            {{item.num}}
                            <button @click="item.num++">+</button>
                        </td>
                        <td>{{item.num*item.price | getprice}}</td>
                        <td><button @click="reItem(index)">移除</button></td>
                    </tr>
                </table>
            </table>
            <!-- 总计 -->
            <h2>总计：{{totalprice | getprice}}</h2>
        </div>
        <div v-else>
            <h2>购物车为空</h2>
        </div>
    </div>
    <script src="./js/vue.min.js"></script>
    <script>
        let vue = new Vue({
            el: "#app",
            data: {
                books: [
                    { id: 1, name: "《水浒传》", date: "2006-9", price: 20, num: 1, check: true },
                    { id: 2, name: "《红楼梦》", date: "2006-7", price: 80, num: 1, check: true },
                    { id: 3, name: "《三国演义》", date: "2008-9", price: 60, num: 1, check: true },
                    { id: 4, name: "《西游记》", date: "2008-2", price: 120, num: 1, check: true },
                ],
                // 全选按钮绑定
                Allcheck: true,
            },
            methods: {
                // 删除
                reItem(index) {
                    this.books.splice(index, 1)
                },
                // 全选
                allcheck() {
                    this.Allcheck = !this.Allcheck;
                    this.books.forEach(element => {
                        element.check = this.Allcheck
                    });
                },
                // 单选
                aloncheck(index) {
                    this.books[index].check = !this.books[index].check;
                    for (const i in this.books) {
                        const element = this.books[i];
                        if (element.check == false) {
                            this.Allcheck = false;
                            return;
                        } else {
                            this.Allcheck = true;
                        }
                    }
                }

            },
            // 过滤器  将价格转换为￥20.00的格式
            filters: {
                getprice(val) {
                    return "￥" + val.toFixed(2);
                }
            },
            // 计算属性（求总计）
            computed: {
                totalprice() {
                    let total = 0;
                    this.books.forEach(element => {
                        if(element.check==true){
                            total += element.price * element.num;
                        }
                    });
                    return total;
                },
            },
        })
    </script>
</body>