购物车界面搭建_做一个购物车界面-CSDN博客

本文链接：https://blog.csdn.net/coising/article/details/123162294

在这里插入图片描述

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</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>price</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.data}}</td>
                        <td>{{ item.price | showPrice}}</td>
                        <td>
                            <button @click="decrement(index)" v-bind:disabled="1 >= item.count">-</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="../vue.js"></script>
    <script src="main.js"></script>

    <script>

    </script>
    
</body>
</html>

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

js:

const app = new Vue({
    el : '#app',
    data : {
        books : [
            {
                id: 1,
                name : '《编程艺术》',
                data : '2022-3',
                price : 39.00,
                count : 1
            },
            {
                id: 1,
                name : '《编大大》',
                data : '2009-4',
                price : 29.00,
                count : 1
            },
            {
                id: 1,
                name : '《编程》',
                data : '2004-4',
                price : 99.00,
                count : 1
            },
            {
                id: 4,
                name : '《艺术》',
                data : '2002-4',
                price : 34.00,
                count : 1
            }
        ]
    },
    methods: {
        increment(index){
            this.books[index].count++
        },
        decrement(index){
            this.books[index].count--
        },
        removeHandle(index){
            // 把自己删除
            this.books.splice(index,1)
        }
    },
    
    computed: {
        totalPrice(){
            let totalPrice = 0
            for(let i=0; i < this.books.length; i++){
                totalPrice+=this.books[i].price * this.books[i].count
            }
            return totalPrice
        }
    },

    filters: {
        showPrice(price){
            return '￥' + price.toFixed(2)
        }
    }
})

最后高级函数写法 computed

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

            // 2. i in books
            // for(let i in this.books){
            //     totalPrice+= this.books[i].price * this.books[i].count
            // }

            // // 3. item in books
            // for(let item of this.books){
            //     totalPrice+=item.price*item.count
            // }
            // return totalPrice
            return this.books.reduce(function(preValue,book){
                return preValue + book.price * book.count
            },0)
        }
    },