目录
vue2.0实例简单购物车
页面展示效果如下：
该购物车实现了自动计算小计、总价。
代码实现
<body><divid="app"><div><formaction="">
商品名称:<inputtype="text"v-model="productName"name="productName">
商品单价:<inputtype="text"v-model="productPrice"name="productPrice"><inputtype="button"value="添加商品"@click="addProduct"></form></div><ul><liv-for="(pro,index) in productList":key="index">
商品名称: {{pro.productName}} ---------------- 商品单价: {{pro.productPrice}}
<button@click="addproToCart(index)">添加商品</button></li></ul><cart:cartlist="cartList"></cart></div><templateid="cartHtml"><div><tableborder="1"><tr><td>商品</td><td>商品名称</td><td>商品价格</td><td>商品数量</td><td>商品价格</td></tr><trv-for="(pro,index) in cartlist":key="index"><td><inputtype="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><tdcolspan="3">选中的商品:{{activeNum}}/{{cartlist.length}}</td><tdcolspan="2">商品总价:{{totalprice}}</td></tr></table></div></template></body>
js代码
var cart ={template:'#cartHtml',props:['cartlist'],methods:{// 商品数量+1addProNum(index){let product =this.cartlist[index];
product.productNum++},// 商品数量-1reduceProNum(index){let product =this.cartlist[index];// 判断商品数量是否为1if(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 ofthis.cartlist){if(pro.active){
result = result + pro.productPrice * pro.productNum
}}return result;}}}var app =newVue({el:'#app',data(){return{productName:'',productPrice:0,productList:[],cartList:[]}},methods:{addProduct(){// todo 对新增的商品名称和单价，进行验证// 查找新增的商品是否存在于商品列表中，如果不在存在返回-1let 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
}})
欢迎大家有问题指出
本文转载自: https://blog.csdn.net/H20031011/article/details/132223321
版权归原作者 天秤座的码农 所有， 如有侵权，请联系我们删除。
版权归原作者 天秤座的码农 所有， 如有侵权，请联系我们删除。