购物车的实现
电商网站的购物车相信每个读者都不陌生，这次我们就结合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>
