011 vue的购书案例
示例代码：
<script>
/*
购物车买书的case
需求：
1. 点击按钮增加买书量，自动计算总价
2. 可移除某些书籍
3. 当所有书籍被移除后，页面显示购物车为空
移除书籍：修改数据模型即可，页面会自动修改
*/
</script>
<style>
.tb{ border: black 3px solid; border-spacing: 0;}
thead{ background-color: rgb(236, 209, 209); font-weight: bold;}
tr{ height: 50px; align-items: center;}
td{ width: 100px; border: black solid 1px; text-align: center; border-spacing: 0;}
</style>
<body>
<div id="app">
<div v-if="totalPrice !== 0">
<table class="tb">
<!-- 设置列宽 -->
<thead>
<tr class="firstLine">
<td></td><td>数据名称</td><td>出版日期</td><td>价格</td><td>购买数量</td><td>操作</td>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in books">
<td>{{index + 1}}</td>
<td>《{{item.name}}》</td>
<td>{{item.issueday}}</td>
<td>￥{{item.price.toFixed(2)}}</td>
<td>
<button @click="minusNum(index)" :disabled="item.count <= 1">-</button>
{{item.count}}
<button @click="addNum(index)">+</button>
</td>
<td><button @click="delCol(index)">移除</button></td>
</tr>
</tbody>
</table>
<div>总价：￥{{totalPrice}}</div>
</div>
<div v-else>购物车为空</div>
</div>
</body>
<script>
var app = new Vue({
el: "#app",
data:{
books:[
{name: "平凡世界", issueday: "2006-10", price: 39.00, count: 1},
{name: "安静人生", issueday: "2008-03", price: 56.00, count: 1},
{name: "松下花开", issueday: "2002-09", price: 74.00, count: 1},
{name: "你若安好", issueday: "2011-11", price: 24.00, count: 1},
{name: "自由追求", issueday: "2012-02", price: 54.00, count: 1},
],
},
computed:{
totalPrice(){
// 1. 普通方法
// var res = 0;
// for(index in this.books){
// res = res + this.books[index].count * this.books[index].price;
// }
// return res;
// 2. reduce方法
return this.books.reduce(function(pre, cur, index, arr){
return pre + cur.count * cur.price;
}, 0)
}
},
methods:{
minusNum(index){
this.books[index].count--;
},
addNum(index){
this.books[index].count++;
},
delCol(index){
this.books.splice(index, 1);
}
}
})
</script>
