vue--購物車案例（小知識點總結）

時間 2019-11-07

標籤 vue 購物車案例知識總結简体版

原文原文鏈接

Html

<!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">
    <title>Document</title>
    <link rel="stylesheet" href="./main.css">

</head>
<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.data}}</td>
                    <!-- <td>{{getFinalPrice(item.price)}}</td> -->
                    <td>{{item.price| showPrice}}</td>
                    <td>
                        <button @click="inc(index)" :disabled="item.count <=1 ">-</button>
                        {{item.count}}
                        <button @click="add(index)">+</button>
                    </td>
                    <td><button @click="removeHandle(index)">移除</button></td>
                </tr>
            </tbody>
        </table>
        <h2>總價格:{{totalPrice|showPrice}}</h2>
    </div>
    <h2 v-else>購物車爲空</h2>
</div>

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

</html>

CSS

table{
    border:1px solid #000;
    border-collapse: collapse;
    border-spacing: 0;
}
th,td{
padding: 8px 16px;
border:1px solid #000;
text-align:left;
}
th{
    background-color: #f7f7f7;
    color:#5c6b77;
    font-weight:600px;
}

JavaScript

const app = new Vue({
    el: '#app',
    data: () => ({
        books: [
            {
                id: 1,
                name: '《算法導論》',
                data: "2018-09-25",
                price: 89.00,
                count: 1
            },
            {
                id: 2,
                name: '《UNIX編程藝術》',
                data: "2018-09-25",
                price: 89.00,
                count: 1
            },
            {
                id: 3,
                name: '《編程珠璣》',
                data: "2018-09-25",
                price: 89.00,
                count: 1
            },
            {
                id: 4,
                name: '《JavaScript高級算法》',
                data: "2018-09-25",
                price: 89.00,
                count: 1
            },
            {
                id: 5,
                name: '《C++》',
                data: "2018-09-25",
                price: 89.00,
                count: 1
            }
        ],
    }),
    computed: {
        totalPrice: function () {
            // 一、
            // let totalPrice = 0
            // for (let i = 0; i < this.books.length; i++) {
            //     totalPrice +=this.books[i].price * this.books[i].count
            // }
            // return totalPrice

            // 二、
            // let totalPrice = 0;
            // for (let i in this.books) {
            //     totalPrice += this.books[i].price * this.books[i].count
            // }
            // return totalPrice

            // 三、
            let totalPrice = 0
            for (let item of this.books) {
                totalPrice += item.price * item.count
            }
            return totalPrice
        }

    },
    methods: {
        // getFinalPrice: (price) => {
        //     return '￥' + price.toFixed(2)
        // }
        add: function (index) {
            this.books[index].count++
        },
        inc: function (index) {

            this.books[index].count--
        },
        removeHandle: function (index) {
            this.books.splice(index, 1)
        }
    },
    filters: {
        showPrice: function (price) {
            return '￥' + price.toFixed(2)
        }
    }
})

注：文件文件位置

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。