011 vue的购书案例

示例代码：
<script>
    /*
        购物车买书的case
            需求：
                1. 点击按钮增加买书量，自动计算总价
                2. 可移除某些书籍
                3. 当所有书籍被移除后，页面显示购物车为空
        
        移除书籍：修改数据模型即可，页面会自动修改
    */
</script>
<style>
    .tb{ border: black 3px solid; border-spacing: 0;}
    thead{ background-color: rgb(236, 209, 209); font-weight: bold;}
    tr{ height: 50px; align-items: center;}
    td{  100px; border: black solid 1px; text-align: center; border-spacing: 0;}
</style>
<body>
    <div id="app">
        <div v-if="totalPrice !== 0">
            <table class="tb">
                <!-- 设置列宽 -->
                <thead>
                    <tr class="firstLine">
                        <td></td><td>数据名称</td><td>出版日期</td><td>价格</td><td>购买数量</td><td>操作</td>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(item, index) in books">
                        <td>{{index + 1}}</td>
                        <td>《{{item.name}}》</td>
                        <td>{{item.issueday}}</td>
                        <td>￥{{item.price.toFixed(2)}}</td>
                        <td>
                            <button @click="minusNum(index)" :disabled="item.count <= 1">-</button>
                            {{item.count}}
                            <button @click="addNum(index)">+</button>
                        </td>
                        <td><button @click="delCol(index)">移除</button></td>
                    </tr>
                </tbody>
                
            </table>
            <div>总价：￥{{totalPrice}}</div>
        </div>
        <div v-else>购物车为空</div>
        

    </div>
</body>
<script>
    var app = new Vue({
        el: "#app",
        data:{
            books:[
                {name: "平凡世界", issueday: "2006-10", price: 39.00, count: 1},
                {name: "安静人生", issueday: "2008-03", price: 56.00, count: 1},
                {name: "松下花开", issueday: "2002-09", price: 74.00, count: 1},
                {name: "你若安好", issueday: "2011-11", price: 24.00, count: 1},
                {name: "自由追求", issueday: "2012-02", price: 54.00, count: 1},
            ],
        },
        computed:{
            totalPrice(){
                // 1. 普通方法
                // var res = 0;
                // for(index in this.books){
                //     res = res + this.books[index].count * this.books[index].price;
                // }
                // return res;
                
                // 2. reduce方法
                return this.books.reduce(function(pre, cur, index, arr){
                    return pre + cur.count * cur.price;
                }, 0)
            }
        },
        methods:{
            minusNum(index){
                this.books[index].count--;
            },
            addNum(index){
                this.books[index].count++;
            },
            delCol(index){
                this.books.splice(index, 1);
            }
        }
    })
</script>
View Code