011 vue的购书案例
示例代码:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<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>