vue实现购物车功能
原理分析和实现
注意想实现该功能，需要学习：Vue学习之路（基础篇），深入的了解每个指令的使用
首先，还是先把布局写好，和引入vue，准备vue实例，这个不多说，代码如下
<!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>vue实现购物车</title> </head> <body> <div id="app"> <h3>购物车</h3> 名称：<input style="width:60px" type="text" v-model="nameValue"> <br/> 单价：<input style="width:60px" type="text" v-model="priceValue"> <br/> 数量：<input style="width:60px" type="text" v-model="countValue"> <button @click="add()">添加购物车</button> <hr/> <table border="1"> <tr> <td>名称</td> <td>单价</td> <td>数量</td> <td>小计</td> </tr> <tr v-for="(product,index) in products"> <td>{{product.name}}</td> <td>{{product.price}}</td> <td> <button @click="desc(index)">-</button> {{product.count}} <button @click="incr(index)">+</button> </td> <td>{{product.price*product.count}}</td> </tr> <tr> <td colspan="4">总价：{{total()}}元</td> </tr> </table> </div> </body> </html> <script src="js/vue-min.js"></script> <script> new Vue({ el: "#app", data: { products: [ {name: "秋裤", price: "81", count: 2}, {name: "华为", price: "5810", count: 1}, ], nameValue: "", priceValue: "", countValue: 0, totalPrice:0 }, methods: { incr(index) { this.products[index].count++; }, desc(index) { this.products[index].count--; }, add() { this.products.push({name: this.nameValue, price: this.priceValue, count: this.countValue}); this.nameValue = ""; this.priceValue = ""; this.countValue = 0; }, total(){ var price=0; for (var i = 0; i <this.products.length; i++) { price+=this.products[i].price * this.products[i].count } return price.toFixed(2); } } }) </script>
