一个简单书籍购物车的例子--练习

最新推荐文章于 2024-09-24 10:17:01 发布

胆小鬼vs

最新推荐文章于 2024-09-24 10:17:01 发布

阅读量366

点赞数

分类专栏： vue 文章标签： html javascript vue.js

本文链接：https://blog.csdn.net/m0_54020832/article/details/125786331

版权

vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

该博客展示了如何使用Vue.js实现一个购物车管理界面，包括书籍的增删及数量调整。用户可以增加或减少商品数量，商品数量最小值为1，无法再减。点击‘移除’按钮可以从购物车中移除商品。当购物车为空时，界面将显示‘购物车为空’。代码示例中详细说明了HTML、JS和CSS的实现细节。

摘要由CSDN通过智能技术生成

实现的结果界面如下：购买数量可以进行对应的增加减少，当减少到1时，则不能继续进行减少操作，点击移除可以移除对应的书籍，若购物车中没有书籍后，则显示购物车为空。

index.html页面代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" 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>
            <tr v-for="(item,index) in books">
                <!--            <td v-for="value in item">{{value}}</td>-->
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.date}}</td>
                <td>{{item.price | showPrice}}</td>
                <td>
                    <!-- disabled属性是使按钮处于不能被点击的状态-->
                    <button @click="decrement(index)" v-bind:disabled="item.count <= 1">-</button>
                    {{item.count}}
                    <button @click="increment(index)">+</button>
                </td>
                <td>
                    <button @click="removeHandle(index)">移除</button>
                </td>
            </tr>
            </tbody>
        </table>
        <h2>总价格：{{totalPrice | showPrice}}</h2>
    </div>
<!--    当所有的书籍都被删除，则显示购物车为空-->
    <h2 v-else>购物车为空</h2>

</div>

<script src="../../js/vue.js"></script>
<script src="index.js"></script>
</body>
</html>

index.js页面代码：

const app = new Vue({
    el:'#app',
    data:{
        books:[
            {
                id:1,
                name:'《算法导论》',
                date:'2006-9',
                price:85.00,
                count:1
        },
            {
                id:2,
                name:'《Linux编程艺术》',
                date:'2006-3',
                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:{
        increment(index){
            // console.log('increment',index);
            this.books[index].count++

        },
        decrement(index){
            // console.log('decrement',index);
            this.books[index].count--
        },
        removeHandle(index){
            // console.log('index');
            this.books.splice(index,1)
        }
    },
    //computed：计算属性
    computed:{
        totalPrice(){
    //计算总价格有4种方式

            // 1.方式1：普通for循环
            // let totalPrice=0;
            // for(let i=0;i<this.books.length;i++){
            //     totalPrice+=this.books[i].price * this.books[i].count
            // }
            // return totalPrice

            //2.方式2：for(let i in this.books)
            // let totalPrice=0;
            // for(let i in this.books){
            //     totalPrice+=this.books[i].price * this.books[i].count
            // }
            // return totalPrice

            //3.方式3：for(let item of this.books)
            // let totalPrice=0;
            // for(let item of this.books){
            //     totalPrice += item.price * item.count
            // }
            // return totalPrice

            //4.方式4：reduce函数使用
            return this.books.reduce(function (preValue,book) {
                return preValue + book.price * book.count
            },0)
        }
    },
    //过滤器---显示￥符号和小数点后两位
    filters:{
        showPrice(price){
            return '￥' +price.toFixed(2)
        }
    }
})

style.css表格样式代码：

table{
    border: 1px solid #e9e9e9;
    /*collapse:边框会合并为一个单一的边框,会忽略border-spacing 和 empty-cells 属性*/
    border-collapse: collapse;
    /*border-spacing:设置或检索当表格边框独立时、行和单元格的边框在横向和纵向上的间距*/
    border-spacing: 0;
}
th,td{
    padding: 8px 16px;
    border: 1px solid #e9e9e9;
    text-align: left;
}
th{
    background-color: #f7f7f7;
    color: #5c6b77;
    font-weight: 600;
}