一. index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="./main.css" />
</head>
<body>
<div id="app">
<div v-if="books.length > 0">
<table>
<thead>
<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.publishDate}}</td>
<!-- 过滤器(类似于linux的管道: ps -ef | grep rtsp) -->
<td>{{book.price | getPrice}}</td>
<td>
<!-- 数量小于等于1的时候,不能点击 -->
<button @click="decrement(index)" v-bind:disabled="book.count <= 1">-</button>
{{book.count}}
<button @click="increment(index)">+</button>
</td>
<td>
<button @click="removeHandle(index)">移除</button>
</td>
</tr>
</tbody>
</table>
<h2>总价: {{totalPrice | getPrice }}</h2>
</div>
<h2 v-else>购物车为空</h2>
</div>
</body>
<script type="application/javascript" src="js/vue.js"></script>
<script src="main.js"></script>
</html>
二. main.css
table {
border: 1px solid #efefef;
border-collapse: collapse;
border-spacing: 0;
}
th, td {
padding: 8px 16px;
border: 1px solid #efefef;
text-align: left;
}
th {
background-color: #f7f7f7;
color: #5c6b77;
font-weight: 600;
}
三. main.js
const app = new Vue({
el: "#app",
data: {
books: [
{
"id": 1,
"name": "《算法导论》",
"publishDate": "2006年9月",
"price": 85.00,
"count": 1
},
{
"id": 2,
"name": "《编程艺术》",
"publishDate": "2006年2月",
"price": 59.00,
"count": 1
},
{
"id": 3,
"name": "《编程珠玑》",
"publishDate": "2006年7月",
"price": 39.00,
"count": 1
},
{
"id": 4,
"name": "《代码大全》",
"publishDate": "2006年3月",
"price": 128.00,
"count": 1
}
]
},
filters: {
getPrice(price){
return "¥" + price.toFixed(2);
}
},
methods: {
increment(index) {
this.books[index].count++;
},
decrement(index) {
this.books[index].count--;
},
removeHandle(index) {
this.books.splice(index, 1);
}
},
computed: {
totalPrice() {
let total = 0;
for(let book of this.books){
total = total + book.count * book.price;
}
return total;
}
}
})
四. 结果
![书籍购物车 书籍购物车](/default/index/img?u=aHR0cHM6Ly93d3cuaWNvZGU5LmNvbS9pL2xsLz9pPTQxZjg0MjFjMDNmOTRiOGE4ZTk2MDU2MjgxNTdmZDExLnBuZz8sdHlwZV9aSEp2YVdSellXNXpabUZzYkdKaFkycyxzaGFkb3dfNTAsdGV4dF9RMU5FVGlCQWRtbGpkRzl5TGVlN3RPV0ZpLWVKdVE9PSxzaXplXzE3LGNvbG9yX0ZGRkZGRix0XzcwLGdfc2UseF8xNg==)