Vue学习13_Vue实现简易的图书购物车

Vue实现简单的图书商城利用vue实现简单的图书商城系统，包括点击对应的书本数量，数量增加，点击减少按钮，数量减少，加个也随着书本数量的变化而变化，当点击移除按钮时，书本从购物车中移除，当所有书本都被移除时，显示购物车为空信息提示：HTML代码：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-

旧梦半岛

2453人浏览 · 2020-10-23 17:39:42

旧梦半岛 · 2020-10-23 17:39:42 发布

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)
        }
    }
})

**运行结果：**初始界面：
在这里插入图片描述
更改书籍数量，总价格也随之改变：

点击移除按钮，书籍信息被移除：

当所有书籍信息都被移除后：界面显示购物车为空

View Design

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

更多推荐

Element UI组件介绍

简介element ui 就是基于vue的一个ui框架,该框架基于vue开发了很多相关组件,方便我们快速开发页面。1、安装Element UI，通过vue脚手架创建项vue init webpack element(项目名)2、在vue脚手架项目中安装elementui# 1.下载elementui的依赖npm i element-ui -S# 2.指定当前项目中使用elementuiimport