Vue实例之购物车实现（2）

最新推荐文章于 2024-03-05 18:17:44 发布

angulaer

最新推荐文章于 2024-03-05 18:17:44 发布

阅读量4.1k

点赞数 89

分类专栏： Vue学习之路文章标签： vue html vue.js javascript

本文链接：https://blog.csdn.net/weixin_42878211/article/details/106610114

版权

Vue学习之路专栏收录该内容

9 篇文章 3 订阅

订阅专栏

实现购物车的页面，完成购物车的基本操作

首先实现html代码，将购物车的主体大致构建出来，然后再利用vue进行功能的实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
        <div id="box" >
            <table>
                <thead>
                    <!-- 购物车标头 -->
                    <tr>
                        <th></th>
                        <th>书籍名称</th>
                        <th>出版日期</th>
                        <th>价格</th>
                        <th>购买数量</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(item,index) in books">
                        <!-- 显示购物车内容 -->
                        <td>{{item.id}}</td>
                        <td>{{item.name}}</td>
                        <td>{{item.date}}</td>
                        <td>{{item.price | showPrice(item.price)}}</td>
                        <td>
                            <button @click="del(index)" :disabled="item.count<=1">-</button>
                            {{item.count}}
                            <button @click="add(index)">+</button>
                        </td>
                        <td>
                            <button @click="move(index)">移除</button>
                        </td>
                    </tr>
                </tbody>
              
            </table>
            <!-- 商品总价 -->
            总价格：{{totalPrice | showPrice}}
        </div>
      
    </div>
    

    <script src="../vue.js"></script>
    <script src="main.js"></script>
</body>
</html>

css代码：

table{
    border: 1px solid #e9e9e9;
    border-collapse: collapse;
    border-spacing: 0ch;
}

th,td{
    padding: 10;
    border: 1px solid #b6b3b3;
    text-align: center;
    width: auto;
}

th{
    background-color: #f7f7f7;
    color: #5c6b77;
    font-weight: 600;
    width:100px;
}

简单的构建出来效果之后，开始进行一些功能的实现

商品数量的增加与减少

添加

添加功能比较容易实现，只需要简单的绑定个函数，使数量自增，就可以实现具体内容

        add(index){
            // 数量自增
            this.books[index].count++;
        },

减少

数量的减少相对会麻烦一点，这时候需要考虑商品的数量不能为负数，并且在购物车中我们一般会考虑商品数量至少为1，如果和增加一样的操作的话，只使数量自减，那么会使商品为负数，所以这里使用了一个**disabled**的属性，当商品数量降为1时，**disabled设置为true**，使得按钮失效，以此来实现具体功能。

                        <td>
                            <button @click="del(index)" :disabled="item.count<=1">-</button>
                            {{item.count}}
                            <button @click="add(index)">+</button>
                        </td>

del函数不再重复，与自增函数类似，主要是使用了动态绑定disabled的用法，使得按钮失效！

移除功能

对于移除功能，我们需要的效果是直接删除该行，那么这个是不难实现的，我们可以利用**splice**来删除该行

产生的问题：

id 这时候需要注意id，即商品的编号，如果我们删除了第一个商品，后面的编号为2 3 4的话，那样岂不是显得我们傻傻的，这不是我们的作风，于是在删除之后，我再次遍历该数组，重新给编号赋值！

        move(index){
            // 删除操作
            this.books.splice(index,1);
            // 进行删除操作之后，将id修改一下，符合购物车排序
            for(let i = 0; i<this.books.length;i++){
                this.books[i].id=i+1;
                
            }

当购物车商品都被移除完之后，显示一个空白的页面岂不是很丢前端的颜面，所以可以用v-if进行判断一下数组的长度是否为0，如果为0，那么就显示购物车为空，否则正常显示

    <div id="box" >
        <div v-if="books.length">
            <table>
                .
                .
                .
            </table>
            <!-- 商品总价 -->
            总价格：{{totalPrice | showPrice}}
        </div>
        <div v-else>
            <h1>购物车为空</h1>
        </div>
    </div>

商品总额

商品总额的话即为商品数量乘以价格，只需要遍历一边即可，不再赘述了，这时候我用了一个过滤器的写法，使得价格会保留两位数字，这种方法比较简洁，便于使用，可以尝试一下

    computed: {
        // 计算总额
        totalPrice(){
            let totalprice=0
            for(let i = 0;i < this.books.length; i++){
                totalprice += this.books[i].count*this.books[i].price;
            }
            return totalprice;
        }
    },

总体思路以及重点代码的解释就说到这里了，实现起来并不算很难，主要是要学会其中解决问题的思路，下面附上完整的代码

test.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="box" >
        <div v-if="books.length">
            <table>
                <thead>
                    <!-- 购物车标头 -->
                    <tr>
                        <th></th>
                        <th>书籍名称</th>
                        <th>出版日期</th>
                        <th>价格</th>
                        <th>购买数量</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(item,index) in books">
                        <!-- 显示购物车内容 -->
                        <td>{{item.id}}</td>
                        <td>{{item.name}}</td>
                        <td>{{item.date}}</td>
                        <td>{{item.price | showPrice(item.price)}}</td>
                        <td>
                            <button @click="del(index)" :disabled="item.count<=1">-</button>
                            {{item.count}}
                            <button @click="add(index)">+</button>
                        </td>
                        <td>
                            <button @click="move(index)">移除</button>
                        </td>
                    </tr>
                </tbody>
              
            </table>
            <!-- 商品总价 -->
            总价格：{{totalPrice | showPrice}}
        </div>
        <div v-else>
            <h1>购物车为空</h1>
        </div>
    </div>
    

    <script src="../vue.js"></script>
    <script src="main.js"></script>
</body>
</html>

style.css

table{
    border: 1px solid #e9e9e9;
    border-collapse: collapse;
    border-spacing: 0ch;
}

th,td{
    padding: 10;
    border: 1px solid #b6b3b3;
    text-align: center;
    width: auto;
}

th{
    background-color: #f7f7f7;
    color: #5c6b77;
    font-weight: 600;
    width:100px;
}

main.js

const app = new Vue({
    el:"#box",
    data:{
        books:[
            {
                id:1,
                name:'《算法设计》',
                date:'2020-6',
                price:76.00,
                count:1
            },
            {
                id:2,
                name:'《操作系统》',
                date:'2020-7',
                price:109,
                count:1
            },
            {
                id:3,
                name:'《java程序设计》',
                date:'2020-2',
                price:89.00,
                count:1
            },
            {
                id:4,
                name:'《前端养成计划》',
                date:'2020-1',
                price:99.00,
                count:1
            },
        ]
    },
    computed: {
        // 计算总额
        totalPrice(){
            let totalprice=0
            for(let i = 0;i < this.books.length; i++){
                totalprice += this.books[i].count*this.books[i].price;
            }
            return totalprice;
        }
    },
    filters:{
        showPrice(price){
            // 过滤器将价格保留两位数字
            return '￥'+price.toFixed(2);
        }
    },
    methods: {
        del(index){
            // /数量自减
            this.books[index].count--;
        },
        add(index){
            // 数量自增
            this.books[index].count++;
        },
        move(index){
            // 删除操作
            this.books.splice(index,1);
            // 进行删除操作之后，将id修改一下，符合购物车排序
            for(let i = 0; i<this.books.length;i++){
                this.books[i].id=i+1;
                
            }
            
        }
    },
})

实现效果：
在这里插入图片描述

删除第二个商品之后，id跟着改变
在这里插入图片描述

商品全部移除
在这里插入图片描述

angulaer

关注

89
点赞
踩
141

收藏

觉得还不错? 一键收藏
打赏
27
评论
Vue实例之购物车实现（2）

实现购物车的页面，完成购物车的基本操作首先实现html代码，将购物车的主体大致构建出来，然后再利用vue进行功能的实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Docu
复制链接

扫一扫