前端 Vue框架学习实例（七）

对于前一段时间学习的阶段练习，实现一个书籍购物车的例子。

最终效果

有数据时：

 

没有数据时：

 

 

 思路：

1.写出页面基本结构以及css样式

2.v-for="(item ,index) in books将数据绑定

3.给按钮+、按钮-、以及移除按钮添加动作

4.计算总价格

5.判断是否有数据

HTML页面

<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></td>
                        <td>{{item.id}}</td>
                        <td>{{item.name}}</td>
                        <td>{{item.data}}</td>
                        <td>{{item.price | showPrice}}</td>
                        <td>
                            <button @click="decrement(index)">-</button> {{item.count}}
                            <button @click="increment(index)">+</button></td>
                        <td><button @click="removeHandle(index)">移除</button></td>
                    </tr>
                </tbody>
            </table>
            总价格： {{totalPrice | showPrice}}
        </div>
        <h2 v-else>购物车为空</h2>
    </div>

css样式

table {
    border: 1px solid #e9e9e9;
    border-collapse: collapse;
    border-spacing: 0;
}

th,
td {
    padding: 8px 16px;
    border: 1px solid #e9e9e9;
    text-align: center;
}

th {
    background-color: #f7f7f7;
    color: #5c6b77;
    font-weight: 600;
}

js文件

const app = new Vue({
    el: '#app',
    data: {
        books: [{
                id: 1,
                name: '《算法导论》',
                data: '2021-9',
                price: 85,
                count: 1
            },
            {
                id: 2,
                name: '《UNIX编程艺术》',
                data: '2016-6',
                price: 59,
                count: 1
            }, {
                id: 3,
                name: '《一支特立独行的猪》',
                data: '2078-9',
                price: 39,
                count: 1
            }, {
                id: 4,
                name: '《黄金年代》',
                data: '2003-6',
                price: 10,
                count: 1
            }
        ]
    },
    methods: {
        increment(index) {
            this.books[index].count++;
        },
        decrement(index) {
            if (this.books[index].count <= 1) {

            } else {
                this.books[index].count--;
            }

        },
        removeHandle(index) {
            this.books.splice(index, 1);
        }
    },
    filters: {
        showPrice(price) {
            return '￥' + price.toFixed(2);
        }
    },
    computed: {

        totalPrice() {
            //普通的for循环
            /* let totalPrice = 0;
            for (let i = 0; i < this.books.length; i++) {
                totalPrice += this.books[i].price * this.books[i].count;
            }
            return totalPrice */

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

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

            //reduce 高阶函数
            return this.books.reduce(function(preValue, books) {
                return preValue + books.price * books.count
            }, 0)
        }
    }
})