Vue购物车案例

最新推荐文章于 2022-10-11 16:00:52 发布

wmxz520

最新推荐文章于 2022-10-11 16:00:52 发布

阅读量415

点赞数

分类专栏：前端文章标签： vue js html

本文链接：https://blog.youkuaiyun.com/wsb_2526/article/details/108366560

版权

前端专栏收录该内容

11 篇文章

订阅专栏

购物车案例

需求

实现一个如图所示的简单的购物车，需要实现的功能有：

可以对购买的数量进行增加或者减少，如果购买数量为1，那么点击"-"按钮无效，即书籍的数量最低是1；
如果不想要某本书可以点击移除按钮，去掉这本书；
如果购物车里吗没有书籍，那么显示的就是购物车为空的提示信息；

在这里插入图片描述

创建文件

由于书籍是一个数组信息，我们可以使用v-for指令去遍历数组，在表格中显示书籍的信息，可选的做法是双重v-for指令循环把书籍的信息输出到表格中，或者类似下面展示的直接使用插值表达式获取某个书籍的信息，这里不使用的原因是我们除了显示价格还需要在价格前面显示￥；
书籍信息成功显示以后，需要在价格前面添加￥符号，这里使用的方法是直接拼接字符串，‘￥’+price；
这里显示的价格都是整数，但是实际情况下价格肯定会出现小数，这里为了能够显示小数，使用的是toFixed()方法；
对于2、3两个操作，这里直接封装成一个函数，调用函数返回数据即可，但是除了调用函数的方法以外，我们这里可以使用过滤器，本质上没有任何变化，只是形式上有有些区别；
增加和减少书籍的数量，这里给按钮添加点击事件，点击按钮以后会调用对应的函数去改变数据，最后页面上v-for指令循环遍历出来的数据也会改变，这里需要传递一个参数进去，这样才能找到对应的书籍进行增加和减少数量的操作；
移除操作，点击移除按钮以后会直接将这一行的数据移除，也就是books数组里面的某一个元素被删除了，这里使用的是数组的splice方法，同样的也需要传递一个参数进去，这样才能找到要删除的元素；
显示总价格，如果没有书籍就提示购物车为空，遍历数组就可以得到总的价格；提示为空这里使用的是v-if指令，如果数组的长度为0，显示的就是购物车为空；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>购物车</title>
    <link href="style.css">
</head>
<body>
   <div id="app">
     <div  v-if="books.length">
         <table>
             <thead>
              <tr>
                 <th></th>
                 <th>书籍名称</th>
                 <th>出版日期</th>
                 <th>价格</th>
                 <th>购买数量</th>
                 <th>操作</th>
             </tr>
             </thead>
             <tbody>
             <!-- <td v-for="value in book">{{value}}</td>-->
             <tr v-for="(book, index) in books">
                 <td></td>
                 <td>{{book.name}}</td>
                 <td>{{book.date}}</td>
                 <!--<td>{{getFinalPrice(book.price)}}</td>-->
                 <td>{{book.price | getFilterPrice}}</td>
                 <td>
                     <button @click="decrement(index)" v-bind:disabled="book.count <= 1">-</button>
                     {{book.count}}
                     <button @click="increment(index)">+</button>
                 </td>
                 <td>
                     <button @click="removeHandle(index)">移除</button>
                 </td>

             </tr>
             </tbody>
         </table>
      <h2>总价格:{{getTotalPrice()}}</h2>
     </div>
   <h2 v-else>购物车为空</h2>

   </div>


   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
   <script src="main.js"></script>

</body>
</html>

style.css

主要是对表格进行的样式设置。

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

th, td {
    padding: 8px 16px;
    border: 1px solid #e9e9e9;
    text-align: left;
}

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

main.js

Vue文件

const app = new Vue({
    el: '#app',
    data: {
        books:[
            {
                id: 1,
                name: '《算法导论》',
                date: '2006-9',
                price: 85.00,
                count: 1
            },
            {
                id: 2,
                name: '《UNIX编程艺术》',
                date: '2006-2',
                price: 59.00,
                count: 1
            },
            {
                id: 3,
                name: '《编程珠玑》',
                date: '2008-10',
                price: 39.00,
                count: 1
            },
            {
                id: 4,
                name: '《代码大全》',
                date: '2006-3',
                price: 128.00,
                count: 1
            },
        ]
    },
    methods: {
        getFinalPrice(price){
            return '￥' + price.toFixed(2);
        },
        increment(index) {
            this.books[index].count++;
        },
        decrement(index) {
            this.books[index].count--;
        },
        removeHandle(index) {
            this.books.splice(index, 1);
        },
        getTotalPrice() {
            let totalPrice = 0;
            for(let i = 0; i < this.books.length; i++) {
                totalPrice += this.books[i].price * this.books[i].count;
                console.log(this.books[i].price);
            }
            return totalPrice;
        }
    },
    filters: {
        getFilterPrice(price) {
            return '￥' + price.toFixed(2);
        }
    }
})