vue2.0实例简单购物车
页面展示效果如下：
该购物车实现了自动计算小计、总价。
代码实现
<body> <div id="app"> <div> <form action=""> 商品名称:<input type="text" v-model="productName" name="productName"> 商品单价:<input type="text" v-model="productPrice" name="productPrice"> <input type="button" value="添加商品" @click="addProduct"> </form> </div> <ul> <li v-for="(pro,index) in productList" :key="index"> 商品名称: {{pro.productName}} ---------------- 商品单价: {{pro.productPrice}} <button @click="addproToCart(index)">添加商品</button> </li> </ul> <cart :cartlist="cartList"></cart> </div> <template id="cartHtml"> <div> <table border="1"> <tr> <td>商品</td> <td>商品名称</td> <td>商品价格</td> <td>商品数量</td> <td>商品价格</td> </tr> <tr v-for="(pro,index) in cartlist" :key="index"> <td><input type="checkbox" v-model="pro.active"></td> <td>{{pro.productName}}</td> <td>{{pro.productPrice}}</td> <td> <button @click="reduceProNum(index)">-</button> {{pro.productNum}} <button @click="addProNum(index)">+</button> </td> <td>{{pro.productPrice * pro.productNum}}</td> </tr> <tr> <td colspan="3">选中的商品:{{activeNum}}/{{cartlist.length}}</td> <td colspan="2">商品总价:{{totalprice}}</td> </tr> </table> </div> </template> </body>
js代码
var cart = { template:'#cartHtml', props:['cartlist'], methods:{ // 商品数量+1 addProNum(index){ let product = this.cartlist[index]; product.productNum++ }, // 商品数量-1 reduceProNum(index){ let product = this.cartlist[index]; // 判断商品数量是否为1 if(product.productNum==1){ this.cartlist.splice(index,1) // 为1，从数组中删除 }else{ product.productNum-- } } }, computed:{ activeNum(){ let activeProdctList = this.cartlist.filter(item=>{ return item.active }) return activeProdctList.length }, totalprice(){ let result = 0; for(pro of this.cartlist){ if(pro.active){ result = result + pro.productPrice * pro.productNum } } return result; } } } var app = new Vue({ el:'#app', data(){ return{ productName:'', productPrice:0, productList:[], cartList:[] } }, methods:{ addProduct(){ // todo 对新增的商品名称和单价，进行验证 // 查找新增的商品是否存在于商品列表中，如果不在存在返回-1 let findindex = this.productList.findIndex(item=>{ return item.productName==this.productName }) if(findindex==-1){ // 判断商品列表中是否存在新增商品 // 把新商品添加到商品列表中 this.productList.push({productName:this.productName,productPrice:this.productPrice}) }else{ alert('此商品已经存在') // 商品已存在，给出提示 } }, // 添加商品到购物车，index是单击商品的下标 addproToCart(index){ let newproduct = this.productList[index]; // 根据下标从商品列表中取出商品对象 // 从购物车列表中查找，是否存在新的商品，如果查到返回购物车中的商品 let product = this.cartList.find(item=>{ return item.productName==newproduct.productName }) if(product){ // 如果有对应商品数量加1 product.productNum++ }else{ // 没有对应商品，添加新的商品到购物车 this.cartList.push({ productName:newproduct.productName, productPrice:newproduct.productPrice, productNum:1, active:true }); } console.log(product); } }, components:{ cart } })
欢迎大家有问题指出
