6.购买书籍的案例

image.png

这个案例的思路：
首先，书籍价格的保留两位小数，需要用到过滤器，filters；然后，我们的加减操作的时候，需要传入index来确定增加哪一本书籍的数量，最后，通过v-if来判断显示的内容

<div id="app">
        <div v-if="books.length">
            <table class="table table-bordered table-striped" :style="{width: '1000px', margin: '100px auto 0'}">
                <thead>
                    <tr class="success">
                        <th>编号</th>
                        <th>书籍名称</th>
                        <th>出版日期</th>
                        <th>书籍价格</th>
                        <th>购买数量</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(item, i) in books" :key="item.id">
                        <td>{{item.id}}</td>
                        <td>{{item.name}}</td>
                        <td>{{item.date}}</td>
                        <td>{{item.price | showPrice}}</td>
                        <td><button class="btn" @click="jian(i)">-</button> {{item.num}} <button class="btn"
                                @click="add(i)">+</button></td>
                        <td><button class="btn" @click="del(i)">删除</button></td>
                    </tr>
                </tbody>
            </table>
            <div :style="{width: '1000px', margin: '10px auto 0'}">总价格为：{{totlePrice | showPrice}}</div>
        </div>
        <div v-else>
            <h2>{{msg}}</h2>
        </div>
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                books: [
                    {id: 1, name: '《计算机原理》', date: '2019-09', price: 119, num: 1},
                    {id: 2, name: '《js高级程序设计》', date: '2019-09', price: 99, num: 1},
                    {id: 3, name: '《js程序设计》', date: '2019-09', price: 88, num: 1},
                    {id: 4, name: '《你不知道的js》', date: '2019-09', price: 140, num: 1},
                    {id: 5, name: '《图解http》', date: '2019-09', price: 100, num: 1},
                ],
                msg: '你没有选择任何书籍'
            },
            methods: {
                add(i) {
                    this.books[i].num++
                },
                jian(i) {
                    if(this.books[i].num > 0){
                        this.books[i].num--
                    }
                },
                del(i) {
                    this.books.splice(i, 1);
                }
            },
            computed: {
                totlePrice() {
                    let price = 0;
                    for(item of this.books) {
                        price += item.price*item.num;
                    }
                    return price;
                }
            },
            filters: {
                showPrice(price) {
                    return '￥'+ price.toFixed(2);
                }
            }
        });
    </script>