Vue学习——计算属性实例

购物车的实现

电商网站的购物车相信每个读者都不陌生，这次我们就结合Vue的计算属性，完成一个简单的购物车实现。

首先熟悉下购物车的性质，用户在选定商品添加到购物车中，在购物车中可以看到所有已选购商品的信息，这些信息包括商品名称、商品单价、商品数量、单项商品的合计金额，以及删除该商品的删除链接，最后还会有一个购物车中所有商品的总价。

实例演示如下图：

在本实例中，我们为了简化流程，直接在代码中给出所有的商品信息。

Vue实例的data选项

data: {
    books: [
        {
            id: 1,
            title: 'Book1',
            price: 69,
            count: 1
        },
        {
            id: 2,
            title: 'Book2',
            price: 146,
            count: 1
        },
        {
            id: 3,
            title: 'Book3',
            price: 124,
            count: 1
        }
    ]
}

购物车中的单项商品金额是动态的，是根据商品的单价和商品的数量得到的，此外所有商品的总价也是动态的，所以这两种数据就不适合在book对象的属性中定义了。

单项商品金额我们采用方法来实现，总价采用计算属性来实现，删除操作的事件处理器也定义为一个方法。代码示例如下：

methods: {
    itemPrice(price, count) {
        return price * count
    },
    deleteItem(index) {
        this.books.splice(index, 1)
    }
},
computed: {
    totalPrice() {
        var total = 0
        for (let book of this.books) {
            total += book.price * book.count
        }
        return total
    }
}

要说明的是：

这里方法和计算属性的定义采用的是ECMAScript 6中对象方法的简写语法。
单项商品金额的实现方法可以有多种，本例采用Vue实例的方法来实现只为了简单起见。

数据、方法、计算属性都写好了，接下来就该轮到购物车中商品的展示了。

books是一个数组对象，自然我们会想到用v-for指令来循环输出商品信息，同时为了让商品信息显示得规规整整，我们使用表格来进行布局。代码示例如下：

<div id="app" v-cloak>
    <table>
        <tr>
            <th>序号</th>
            <th>商品名称</th>
            <th>单价</th>
            <th>数量</th>
            <th>金额</th>
            <th>操作</th>
        </tr>
        <tr v-for="(book, index) in books" :key="book.id">
            <td>{{book.id}}</td>
            <td>{{book.title}}</td>
            <td>{{book.price}}</td>
            <td>
                <button v-bind:disabled="book.count === 0" 
                        v-on:click="book.count -= 1">-</button>
                {{book.count}}
                <button v-on:click="book.count += 1">+</button>
            </td>
            <td>
                {{itemPrice(book.price, book.count)}}
            </td>
            <td>
                <button @click="deleteItem(index)">删除</button>
            </td>
        </tr>
    </table>
    <span>总价：¥{{totalPrice}}</span>
</div>

要说明的是：

在<div>元素中我们使用了v-cloak指令来避免页面加载时的闪烁问题，当然，这需要和CSS样式规则[v-cloak] {display: none}一起使用。
使用v-for指令时，我们同时使用了key属性（采用v-bind的简写语法）。
商品数量的左右两边各添加了一个减号和加号按钮，用于递减和递增商品数量，当商品数量为0时，通过v-bind: disable="book.count === 0"来禁用按钮。此外，由于这两个按钮的功能都很简单，所以在使用v-on指令时，没有绑定click事件处理方法，而是直接使用了JavaScript语句。
单项商品的价格通过调用itemPrice()方法来输出。
所有商品总价通过计算属性totalPrice来输出。
单项商品的删除通过v-on指令绑定deleteItem()方法来实现。

完整代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>购物车实例</title>
        <style>
            body {
                width: 600px;
            }
            table {
                border: 1px solid black;
                width: 100%;
            }
            th {
                height: 50px;
            }
            th, td {
                border-bottom: 1px solid #ddd;
                text-align: center;
            }
            span {
                float: right;
            }

            [v-cloak] {
                display: none;
            }
        </style>
    </head>
    <body>
        <div id="app" v-cloak>
            <table>
                <tr>
                    <th>序号</th>
                    <th>商品名称</th>
                    <th>单价</th>
                    <th>数量</th>
                    <th>金额</th>
                    <th>操作</th>
                </tr>
                <tr v-for="(book, index) in books" :key="book.id">
                    <td>{{book.id}}</td>
                    <td>{{book.title}}</td>
                    <td>{{book.price}}</td>
                    <td>
                        <button v-bind:disabled="book.count === 0" 
                                v-on:click="book.count -= 1">-</button>
                        {{book.count}}
                        <button v-on:click="book.count += 1">+</button>
                    </td>
                    <td>
                        {{itemPrice(book.price, book.count)}}
                    </td>
                    <td>
                        <button @click="deleteItem(index)">删除</button>
                    </td>
                </tr>
            </table>
            <span>总价：¥{{totalPrice}}</span>
        </div>
        
        <script src="./vue.js"></script>
        <script>
            var vm = new Vue({
                el: '#app',
                data: {
                    books: [
                        {
                            id: 1,
                            title: 'Book1',
                            price: 69,
                            count: 1
                        },
                        {
                            id: 2,
                            title: 'Book2',
                            price: 146,
                            count: 1
                        },
                        {
                            id: 3,
                            title: 'Book3',
                            price: 124,
                            count: 1
                        }
                    ]
                },
                methods: {
                    itemPrice(price, count) {
                        return price * count
                    },
                    deleteItem(index) {
                        this.books.splice(index, 1)
                    }
                },
                computed: {
                    totalPrice() {
                        var total = 0
                        for (let book of this.books) {
                            total += book.price * book.count
                        }
                        return total
                    }
                }
            })
        </script>
    </body>
</html>