购物车(二）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>购入车</title>
        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <b>购入车：</b>
        <hr>
        <div id="buyCar" 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>{{item.price | shwoPrice}}</td><!--  fileters 会把 item.price当参数传递给shwoPrice -->
                        <td><button v-bind:disabled="item.count  <= 1" @click="decreatement(index)">-</button>{{item.count}}<button
                             @click="increatement(index)">+</button></td>
                        <td><button @click="deletebook(index)">移除</button></td>
                    </tr>
                </tbody>
            </table>
            <h3> 总价格：{{totalPrice | shwoPrice}}</h3>

        </div>


        <script type="text/javascript">
            const vm = new Vue({
                el: '#buyCar',
                data: {
                    books: [{
                        id: 1,
                        name: '《算法导论》',
                        date: '2006-9',
                        price: 85.10,
                        count: 1
                    }, {
                        id: 2,
                        name: '《UNIX编程艺术》',
                        date: '2006-2',
                        price: 59.80,
                        count: 1
                    }, {
                        id: 3,
                        name: '《编程珠玑》',
                        date: '2008-10',
                        price: 39.11,
                        count: 1
                    }, {
                        id: 4,
                        name: '《代码大全》',
                        date: '2001-10',
                        price: 128.30,
                        count: 1
                    }]
                },
                methods: { //触发事件
                    deletebook: function(index) {
                        this.books.splice(index, 1)
                    },
                    decreatement: function(index) {
                        this.books[index].count--
                    },
                    increatement: function(index) {
                        this.books[index].count++
                    }
                },
                computed: { //计算
                    totalPrice() {
                        let sumValue = 0;
                        /* 方法1： for (let i in this.books) {
                            sumValue += this.books[i].price * this.books[i].count
                        } */
                        /* 方法2： for (let item of this.books) {
                            sumValue += item.price * item.count
                        } */

                        return this.books.reduce(function(preValue, book) {
                            return preValue + book.price * book.count
                        }, 0);
                    }
                },
                <!-- 过滤器的使用： item.price | 过滤器 -->
                filters: { //过滤器：| 顾虑器 
                    shwoPrice(price) {
                        return '￥' + price.toFixed(2) //此过滤器作用:加前缀和保持两位小数；
                    }
                }
            })
        </script>
        <style>
            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>
    </body>
</html>
购物车(二）

推荐阅读更多精彩内容
