VUE實現購物車數量編輯頁面小案例

程序员文章站 2024-03-25 22:55:22
...
VUE實現購物車數量編輯頁面小案例

效果如下

VUE實現購物車數量編輯頁面小案例
代碼

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>圖書購物車小案例</title>
    <style>
        [v-cloak] {
            display: none;
        }

        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;
        }
    </style>
</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="(item,index) in books">
                        <td>{{item.id}}</td>
                        <td>{{item.name}}</td>
                        <td>{{item.date}}</td>
                        <!-- <td>{{getFinalPrice(item.price)}}</td> -->
                        <!-- 使用過濾器 -->
                        <td>{{item.price*item.count|showPrice}}</td>
                        <td>
                            <button @click="sub(index)" v-bind:disabled="item.count<=1">-</button>
                            <input type="number" v-model="item.count" style="width:60px">
                            <!-- {{item.count}} -->
                            <button @click="add(index)">+</button>
                        </td>

                        <td>
                            <button @click="del(index)">移除</button>
                        </td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <th>總價</th>
                        <th colspan="5">{{getTotalPrice}}</th>
                    </tr>
                </tfoot>
            </table>
        </div>
        <div v-else style="padding:15px;background-color: #e9e9e9;">
            對不起，購物車空空如也
        </div>
    </div>

    <script>
        const vue = new Vue({
            el: '#app',
            data: {
                books: [
                    { id: 1, name: '《算法導論》', date: '2006-9', price: 85.00, count: 1 },
                    { id: 2, name: '《UNIX編程藝術》', date: '2006-2', 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: {
                // 使用方法進行出來價格
                getFinalPrice(price) {
                    return '￥' + price.toFixed(2);
                },
                add(index) {
                    this.books[index].count++;
                },
                sub(index) {
                    this.books[index].count--;
                },
                del(index) {
                    this.books.splice(index, 1);
                }
            },
            filters: {
                // 使用過濾器進行出來價格
                showPrice(price) {
                    return '￥' + price.toFixed(2);
                }
            },
            computed: {
                getTotalPrice() {
                    let total = 0;
                    // 方式1 
                    total = this.books.reduce((temp, item) => {
                        return temp + item.price * item.count;
                    }, 0)

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

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


                    return this.getFinalPrice(total)
                }
            }
        })
    </script>
</body>

</html>
相关标签：前端小案例 vue javascript
上一篇： SQL语言（二）数据库查询语言第一部分（SQL查询）
下一篇：游戏中的算法