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
View Design

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

更多推荐

cover

vue+element ui实现好看的登录界面

avatar ViewDesign

vue3.0中使用elementUi(element-plus的使用)

element-plus的使用小朋友，你是不是有很多问号❓❓❓甲：为什么在vue3.0中不能使用Element UI了？乙：由于vue3.0在插件install函数的入参从Vue原型（类）改成了app（vue实例），导致element-ui中Vue.prototype.* 这样的代码已经全都失效了。所以element-ui铁定是不兼容了。甲：那有什么方法能解决吗？乙：使用Element UI的升级

avatar ViewDesign

ElementUI 整体页面布局

一、概述一般后台页面的顶部导航栏和左侧导航栏一般是固定的，我们可以布局成下面的样式二、整体项目布局因为我们的首页是个公共的组件，点击首页，会员管理，都不会变，所以我们可以放在一个单独文件夹里面。需要分别对头部，左侧区域，主区域拆分成不同的文件。创建项目创建一个全新的ElementUI 项目，请参考链接：https://www.cnblogs.com/xiao987334176/p...

avatar ViewDesign