书籍购物车案例
要求1：书架上有四种书以及每种书的信息，要求购物车根据每种书本的数量自动求出总价。
要求2：所以的价格要符合类似￥85.00的格式。
要求3：每种书的数量减少到1时，减少按钮不可点击，且购物车有移除书本各类的功能。
要求4：当购物车为空时，购物车显示出“购物车为空”
index.html
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>书籍购物车案例</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="app">
<div v-if="books.length">
<table cellspacing="0px">
<thead align="center">
<tr>
<th></th>
<th>书籍名称</th>
<th>出版日期</th>
<th>价格</th>
<th>购买数量</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(book, index) in books">
<td>{{book.id}}</td>
<td>{{book.name}}</td>
<td>{{book.createDate}}</td>
<td>{{book.price | showPrice}}</td>
<td>
<button @click="decrement(index)" :disabled="book.amount===1">
-</button
>{{book.amount}}<button @click="increment(index)">+</button>
</td>
<td><button @click="removeHandle(index)">移除</button></td>
</tr>
</tbody>
</table>
<h2>总价格：{{totalPrice | showPrice}}</h2>
</div>
<div v-else>
<h2>购物车为空</h2>
</div>
</div>
<script src="../js/vue.js"></script>
<script src="main.js"></script>
</body>
</html>
main.js
const app = new Vue({
el: "#app",
data: {
books: [
{
id: 1,
name: "《操作系统》",
createDate: "2006-9",
price: 85.0,
amount: 1
},
{
id: 2,
name: "《UNIX编程艺术》",
createDate: "2006-2",
price: 59.0,
amount: 1
},
{
id: 3,
name: "《编程珠玑》",
createDate: "2008-10",
price: 39.0,
amount: 1
},
{
id: 4,
name: "《代码大全》",
createDate: "2004-3",
price: 128.0,
amount: 1
}
]
},
computed: {
totalPrice(){
let totalPrice = 0
for (let item of this.books) {
totalPrice += item.price * item.amount
}
return totalPrice
}
},
methods: {
increment(index) {
this.books[index].amount++
},
decrement(index) {
this.books[index].amount--
},
removeHandle(index) {
this.books.splice(index, 1)
}
},
filters: {
showPrice(price) {
return "￥" + price.toFixed(2)
}
}
})
style.css
table {
border: 1px solid #e9e9e9;
}
th,
td {
padding: 8px 16px;
border: 1px solid #e9e9e9;
text-align: center;
}
th {
background-color: #f7f7f7;
color: #5c6b77;
font-weight: 900;
}
1.内容讲解
- 写一个table和thead，tbody中每一个tr都用来遍历data变量中的books列表。
<table cellspacing="0px">
<thead align="center">
<tr>
<th></th>
<th>书籍名称</th>
<th>出版日期</th>
<th>价格</th>
</tr>
</thead>
<tbody>
<tr v-for="(book, index) in books">
<td>{{book.id}}</td>
<td>{{book.name}}</td>
<td>{{book.createDate}}</td>
<td>{{book.price | showPrice}}</td>
</tr>
</tbody>
</table>
结果如下：
- 在thead中加上购买数量和操作，并在对应的tbody中加入对应的按钮。结果如下：
- 为每个+和-按钮添加事件，将index作为参数传入，并判断当数量为1时，按钮-不可点击。
<td>
<button @click="decrement(index)" :disabled="book.amount===1">-</button>
{{book.amount}}
<button @click="increment(index)">+</button>
</td>
increment(index) {
this.books[index].amount++
},
decrement(index) {
this.books[index].amount--
}
结果如下：
- 为每个移除按钮添加事件，将index作为参数传入，用splice方法将其删除即可，点击查看splice详解。
<td><button @click="removeHandle(index)">移除</button></td>
removeHandle(index) {
this.books.splice(index, 1)
}
结果如下：
- 为每个价格添加过滤器，将所有的价格改成￥85.00格式，先在前面加上"￥"，其中toFixed(2)即保留两位小数，点击查看过滤器详情。
<!-- 表格中的价格 -->
<td>{{book.price | showPrice}}</td>
<!-- 总价的价格 -->
<h2>总价格：{{totalPrice | showPrice}}</h2>
showPrice(price) {
return "￥" + price.toFixed(2)
}
结果如下：
- 判断当购物车为空时，显示购物车为空，将整个table用div包裹，用v-if判断books的length是否为0，为0则显示“购物车为空”。结果如下：
- 在表格下面加上总价格，并用计算属性计算总价格，直接将每种书的数量乘以每种书的价格求合即可。当书的数量更改时，总价格会跟着自动更改。
totalPrice(){
let totalPrice = 0
for (let item of this.books) {
totalPrice += item.price * item.amount
}
return totalPrice
}
结果如下：
2.归纳总结
看着很复杂的要求，还是被一步步解决。在不熟悉的情况下，做这种综合多种知识点的问题一定要先在脑海中分清先后顺序，找到不同知识点的连接点，然后分解多个步骤解决。
第一次记录自己的学习笔记，如果您发现问题，欢迎指点。
