使用Vue2实现简单的购物车功能(可直接使用)
更新时间：2023年08月13日 10:19:45 作者：天秤座的码农
这篇文章主要给大家介绍了如何使用Vue2实现简单的购物车功能,文中有相关的代码示例,对我们的学习或工作有一定的帮助,需要的朋友可以参考下
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
}
})到此这篇关于使用Vue2实现简单的购物车功能(可直接使用)的文章就介绍到这了,更多相关Vue2实现购物车功能内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要为大家详细介绍了vue组件实现可搜索下拉框的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-06-06
这篇文章主要介绍了Vue3请求拦截器里如何配置token,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-08-08
Vue 提供了一个强大的过渡系统,可以用于在进入、离开和列表渲染时添加各种动画效果,这些过渡不仅能够提升用户体验,还能使界面更加生动和吸引人,本文将介绍 Vue 中实现过渡效果的基本方法,并提供使用 setup 语法糖的代码示例,需要的朋友可以参考下2024-09-09
这篇文章主要介绍了vue 音乐App QQ音乐搜索列表最新接口跨域设置方法，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2018-09-09
这篇文章主要为大家介绍了Vue3将虚拟节点渲染到网页初次渲染详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-03-03
这篇文章主要为大家详细介绍了在vue环境单页面项目下,如何实现不定高虚拟列表,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2023-10-10
Vue-DPlayer是一个易于使用、高性能的基于Vue.js的视频播放器组件,这篇文章将为大家详细介绍一下vue-dplayer视频播放器组件的安装与使用,需要的小伙伴可以参考下2023-09-09
在web开发中,组件化开发已成为一种趋势,Vue提供了一种高效的方式来创建和管理这些组件—单文件组件,下面我们就来看看它的具体应用吧2024-03-03
这篇文章主要介绍了Vue3封装ant-design-vue表格，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-05-05
这篇文章主要介绍了vue2.0组件之间传值、通信的多种方式以及注意要点，需要的朋友可以参考下2018-02-02
最新评论