<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>购物车</title>
<link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="app">
<div class="container">
<div v-if="books.length">
<table class="table table-hover table-striped table-bordered table-responsive" >
<thead>
<tr>
<th></th>
<th>书籍名称</th>
<th>出版日期</th>
<th>价格</th>
<th>购买数量</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(book,index) in books" :key="book.id">
<td>{
{book.id}}</td>
<td>{
{book.name}}</td>
<td>{
{book.date}}</td>
<td>{
{book.price | showPrice}}</td>
<td>
<button @click = "descreament(index)" :disabled = "book.count <= 1">-</button>
{
{book.count}}
<button @click = "increament(index)">+</button>
</td>
<td>
<button @click = "remove(index)">移除</button>
</td>
</tr>
</tbody>
</table>
<h3>{
{"总价" + sumPrice + "元"}}</h3>
</div>
<div v-else>购物车为空</div>
</div>
</div>
<script src="../js/vue.js"></script>
<script src="main.js"></script>
</body>
</html>
var vm = new Vue({
el:'#app',
data: {
books:[
{
id: 1,
name: '算法导论',
date: '2018-10-10',
price: 123,
count: 1
},
{
id: 2,
name: '计算机组成原理',
date: '2008-1-10',
price: 93,
count: 1
},
{
id: 3,
name: '数据结构与算法',
date: '2018-10-10',
price: 66,
count: 1
},
{
id: 4,
name: '人月神话',
date: '2018-10-10',
price: 83,
count: 1
}
]
},
methods: {
descreament(index) {
this.books[index].count --;
},
increament(index) {
this.books[index].count ++;
},
remove(index) {
this.books.splice(index, 1);
}
},
filters: {
showPrice(price) {
return '￥' + price.toFixed(2);
}
},
computed: {
sumPrice(){
let sum = 0;
this.books.forEach(element => {
sum += element.count * element.price;
});
return sum;
}
}
});