Vue全家桶之实现购物车案例图文讲解

最新推荐文章于 2022-07-22 14:17:51 发布

Code皮皮虾

最新推荐文章于 2022-07-22 14:17:51 发布

阅读量1.8k

点赞数 4

分类专栏： Vue 文章标签： vue 项目 python java html

本文链接：https://blog.csdn.net/llllllkkkkkooooo/article/details/108559739

版权

Vue 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

文章目录

1、基本环境搭建

在这里插入图片描述

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="style.css">
</head>
<script src="./js/vue.js"></script>
<body>
    <div id="app">
        <table>
            <thead>
                <tr>
                    <th></th>
                    <th>书籍</th>
                    <th>出版日期</th>
                    <th>价格</th>
                    <th>购买数量</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in books">
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.date}}</td>
                    <td>{{item.price}}</td>
                    <td>
                        <button>
                            -
                        </button>
                            1
                        <button>
                            +
                        </button>
                    </td>
                    <td>
                        <button>移除</button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

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

main.js

const app = new Vue({
    el: "#app",
    data:{
        books: [
            {
                id: 1,
                name: '《大话数据结构》',
                date: '2020-09-13',
                price: 51.00,
                count: 2
            },
            {
                id: 2,
                name: '《Java从入门到精通》',
                date: '2020-09-13',
                price: 69.00,
                count: 1
            },
            {
                id: 3,
                name: '《Python爬虫全套》',
                date: '2020-09-13',
                price: 99.00,
                count: 3
            },
            {
                id: 4,
                name: '《Hadoop入门到精通》',
                date: '2020-09-13',
                price: 88.00,
                count: 5
            }
        ]
    }
})

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

搭建结果
在这里插入图片描述

简单讲述搭建过程
在这里插入图片描述

2、使用过滤器对价格进行优化

在这里插入图片描述

在这里插入图片描述
实现结果

3、改变购买数量

在这里插入图片描述

在这里插入图片描述
通过v-bind，当数量小于等于1时，使减号按钮不能点击

4、实现移除按钮并计算总价格

在这里插入图片描述
全部移除后出现以下结果，这当然是不行的

优化后

计算总价格

在这里插入图片描述

5、完整代码

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="style.css">
</head>
<script src="./js/vue.js"></script>
<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>
                <tr v-for="(item,index) in books">
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.date}}</td>
                    <td>{{item.price | showPrice}}</td>
                    <td>
                        <button @click="decrement(index)" v-bind:disabled="item.count <= 1">
                            -
                        </button>
                        {{item.count}}
                        <button @click="increment(index)">
                            +
                        </button>
                    </td>
                    <td>
                        <button @click="remove(index)">移除</button>
                    </td>
                </tr>
                </tbody>
            </table>
            <h2>总价格：{{totalPrice | showPrice}}</h2>
        </div>
        <h2 v-else>购物车为空</h2>
    </div>

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

main.js

const app = new Vue({
    el: "#app",
    data:{
        books: [
            {
                id: 1,
                name: '《大话数据结构》',
                date: '2020-09-13',
                price: 51.00,
                count: 2
            },
            {
                id: 2,
                name: '《Java从入门到精通》',
                date: '2020-09-13',
                price: 69.00,
                count: 1
            },
            {
                id: 3,
                name: '《Python爬虫全套》',
                date: '2020-09-13',
                price: 99.00,
                count: 3
            },
            {
                id: 4,
                name: '《Hadoop入门到精通》',
                date: '2020-09-13',
                price: 88.00,
                count: 5
            }
        ]
    },
    filters: {
        showPrice(price){
            return '￥' + price.toFixed(2);
        }
    },
    methods:{
        increment(index){
            this.books[index].count++
        },
        decrement(index){
            this.books[index].count--
        },
        remove(index){
            this.books.splice(index,1)
        }
    },
    computed:{
        totalPrice(){
            let allPrice = 0;
            for(let i = 0;i < this.books.length;i++){
                allPrice += this.books[i].price * this.books[i].count
            }
            return allPrice
        }
    }
})

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

博主会持续更新，有兴趣的小伙伴可以点赞、关注和收藏下哦，你们的支持就是我创作最大的动力！

Java学习从入门到大神学习目录索引

博主开源Python爬虫教程目录索引（宝藏教程，你值得拥有！）

在这里插入图片描述

Code皮皮虾

关注

4
点赞
踩
26

收藏

觉得还不错? 一键收藏
0
评论
Vue全家桶之实现购物车案例图文讲解

文章目录1、基本环境搭建2、使用过滤器对价格进行优化3、改变购买数量4、实现移除按钮并计算总价格5、完整代码1、基本环境搭建index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="style.css">
复制链接

扫一扫