Vue实现简易的图书购物车

利用vue实现简单的图书商城系统,包括点击对应的书本数量,数量增加,点击减少按钮,数量减少,加个也随着书本数量的变化而变化,当点击移除按钮时,书本从购物车中移除,当所有书本都被移除时,显示购物车为空信息提示:

HTML代码:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车案例</title>
    <link rel="stylesheet" href="./style.css">
    <script src="../js/vue.js"></script>
</head>

<body>

    <div id="app">
        <div v-if="books.length>0">
            <table>
                <thead>
                    <tr>
                        <th></th>
                        <th>书籍名称</th>
                        <th>出版日期</th>
                        <th>价格</th>
                        <th>购买数量</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(book,index) in books">
                        <td>{{book.id}}</td>
                        <td>{{book.name}}</td>
                        <td>{{book.date}}</td>
                        <td>{{book.price | showPrice}}</td>
                        <td>
                            <button @click="decrement(index)" :disabled="book.count <= 1">-</button>
                            {{book.count}}
                            <button @click="increment(index)">+</button>
                        </td>
                        <td>
                            <button @click="remove(index)">移除</button>
                        </td>
                    </tr>
                </tbody>
            </table>
            <h2>总价格{{totalPrice3 | showPrice}}</h2>
        </div>
        <h2 v-else>
            购物车为空
        </h2>
    </div>

    <script src="./main.js"></script>

</body>

</html>

CSS代码:

table{
    border: 1px soild #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-size: 600;
}

JS代码:

const app = new Vue({
    el: '#app',
    data: {
        books: [{
                id: 1,
                name: '《算法导论》',
                date: '2019-06',
                price: 85.00,
                count: 1
            },
            {
                id: 2,
                name: '《计算机组成原理》',
                date: '2019-09',
                price: 59.00,
                count: 1
            },
            {
                id: 3,
                name: '《数据结构》',
                date: '2018-12',
                price: 39.00,
                count: 1
            },
            {
                id: 4,
                name: '《计算机网络》',
                date: '2020-07',
                price: 128.00,
                count: 1
            }
        ]
    },
    computed: {
        // 普通的for循环
        totalPrice() {
            let total = 0;
            for (let i = 0; i < this.books.length; i++) {
                total += this.books[i].price * this.books[i].count;
            }
            return total;
        },
        // for in循环
        totalPrice1() {
            let total = 0;
            for (let i in this.books) {
                total += this.books[i].price * this.books[i].count;
            }
            return total;
        },
        // of方法遍历
        totalPrice2() {
            let total = 0;
            for (let book of this.books) {
                total += book.price * book.count;
            }
            return total
        },
        // 高阶函数使用
        totalPrice3() {
            return this.books.reduce(function (preValue, book) {
                return preValue + book.price * book.count;
            }, 0)
        }
    },
    methods: {
        decrement(index) {
            if (this.books[index].count > 1) {
                this.books[index].count--
            }
        },
        increment(index) {
            this.books[index].count++
        },
        remove(index) {
            this.books.splice(index, 1)
        }
    },
    // 过滤器
    filters: {
        showPrice(price) {
            return '¥' + price.toFixed(2)
        }
    }
})

**运行结果:**初始界面:
在这里插入图片描述
更改书籍数量,总价格也随之改变:
在这里插入图片描述
点击移除按钮,书籍信息被移除:
在这里插入图片描述
当所有书籍信息都被移除后:界面显示购物车为空
在这里插入图片描述

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐