今天的小案例，用Vue实现购物车小案例，下面是代码以及效果图：
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="app">
<div v-if="books.length">
<table>
<thead>
<tr>
<th></th>
<th>书名</th>
<th>出版日期</th>
<th>价格</th>
<th>购买数量</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in books">
<td>{
{
item.id}}</td>
<td>{
{
item.name}}</td>
<td>{
{
item.date}}</td>
<td>{
{
item.price|showPrice}}</td>
<td>
//数量到1后减按钮不可使用
<button @click="sub(index)" v-bind:disabled="item.count<=1">-</button>
{
{
item.count}}
<button @click="add(index)">+</button>
</td>
<td>
<button @click="removeHandler">移除</button>
</td>
</tr>
</tbody>
</table>
<h3>totalPrice:{
{
totalPrice|showPrice}}</h3>
</div>
<h2 v-else>购物车为空！</h2>
</div>
<script src="../js/vue.js"></script>
<script src="main.js"></script>
</body>
</html>
style.css
table{
border: 1px solid black;
border-collapse: collapse;
border-spacing: 0;
}
th,td{
padding: 8px 16px;
border: 1px solid #e9e9e9;
}
th{
background-color: #f7f7f7;
color: black;
font-weight: 600;
}
js
const app = new Vue({
el: '#app',
data: {
books:[
{
id:1,
name:'Linux',
date:'2020-02',
price:100.00,
count:1
},
{
id:2,
name:'Java',
date:'2020-03',
price:50.00,
count:1
},
{
id:3,
name:'C++',
date:'2000-02',
price:10.00,
count:1
},
{
id:4,
name:'shell',
date:'2009-02',
price:33.00,
count:1
}
]
},
methods:{
// sumPrice(price){
// return "￥" + price.toFixed(2);
// }
add(index){
this.books[index].count++;
},
sub(index){
this.books[index].count--;
},
removeHandler(index){
this.books.splice(index,1)
}
},
computed:{
totalPrice(){
let total=0;
//总价的计算有下面三种方式：
// 1.
// for(let i=0;i<this.books.length;i++){
// total+=this.books[i].price*this.books[i].count;
// }
//return total；
// 2.
// for (let item of this.books)
// total+=item.price*item.count;
//return total；
//3.
// reduce
return this.books.reduce(function(preValue,book){
return preValue+book.price*book.count；
},0)
}
},
filters:{
showPrice(price){
//对价格保留两位小数并加上价格符号
return "￥" + price.toFixed(2)
}
},
})
效果图：
