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>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跟着改变
在这里插入图片描述

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

相关推荐
©️2020 CSDN 皮肤主题: Age of Ai 设计师:meimeiellie 返回首页