vue实现购物车的思路,vuex购物车案例
这篇文章主要为大家详细介绍了某视频剪辑软件实现简单的购物车小案例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件实现简单购物车的具体代码，供大家参考，具体内容如下
最近在写某视频剪辑软件的相关项目，所以找一些小例子练习一下，把一个射流研究…的购物车改成某视频剪辑软件了
钢性铸铁部分是直接引入的插件
效果图如下
模板
div class=head
meta charset=UTF-8
标题我的购物车-品优购/标题
meta name=description content=品优购JD .表示"同"专业的综合网上购物商城，销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品。便捷、诚信的服务，为您提供愉悦的网上购物体验!/
meta name=Keywords content=网上购物，网上商城，手机，笔记本，电脑、MP3、CD、VCD、DV、相机，数码，配件，手表，存储卡，品优购 /
！-lt；格式化数据分区引入facicon.ico网页图标ndashgt-
！- link rel=快捷图标href=favicon.ico rel=外部nofollow type=image/x-icon/-
！-引入钢性铸铁初始化的钢性铸铁文件-
link rel=样式表 href= src/assets/car style/base。CSS rel=外部无跟随
！-引入公共样式的钢性铸铁文件-
link rel=样式表 href= src/assets/car style/common。CSS rel=外部无跟随
！-引入汽车css -
link rel=样式表 href= src/assets/car style/car。CSS rel=外部无跟随
/div
div class=body
div class=汽车标题
div class=w
div class=汽车标志
img src= src/资产/图像/徽标。png alt= b购物车/b
/div
/div
/div
div class= c-容器
div class=w
div class=购物车-过滤栏
全身长的全部商品/em
/div
！-购物车主要核心区域-
div class=cart-warp
！-头部全选模块-
div class=cart-thead
div class=t-checkbox
输入类型= checkbox name= id= class=全部选中全选
/div
货物分类商品/div
div class=" t-price "单价/div
div class=t-num 数量/div
div class=" t-sum "小计/div
div class=t-action 操作/div
/div
！-商品详细模块-
div class=购物车-商品-列表 v-for=(商品，索引)在目录列表中
div class=购物车-商品
p-复选框
输入类型=复选框 v-model=好。被选中 @ click= one selected(index)
/div
div class=p商品
div class=p-img
img v-bind:src=good.imgUrl alt=
/div
很好。message } }/div
/div
div class=p-price{好。价格项目} }/分区
div class=p-num
div class=数量-形式
El-button class= increment @ click= changed e(index)-/El-button
输入type= text class= itxt v-model=good .ItemNum占位符=1
El-button class= increment @ click= change in(index)/El-button
/div
/div
很好PriceSum}}/div
div class="行动"
El-button type= danger @ click= delete item(id)删除/el-button
/div
/div
/div
！-结算模块-
div class=cart-floatbar
div class=全选
输入类型=复选框@ click= all check v-model= all selected 全选
/div
div class=操作
a class= remove-batch @ click= delete selected 删除选中的商品/a
全部清除 @ click=全部删除清理购物车/a
/div
div class=工具栏-右侧
div class=amount-sum 已经选em{{NumSum}}/em件商品/div
div class=价格总和总价：em{{totalPrice}}/em/div
BTN地区"去结算/div
/div
/div
/div
/div
/div
/div
/模板
脚本
从“vue”导入{定义组件}
导出默认定义组件({
data(){
返回{
全选：假
目录列表：[
{
imgUrl: src/assets/upload/P1。 jpg ，
消息：【5本26.8元】经典儿童文学彩图青少版八十天环游地球中学生语文教学大纲，
价格项目：12.6英镑，
价格总和：12.6,
ItemNum: 1，
isSelected:false
},
{
imgUrl: src/assets/upload/p2。 jpg ，
消息：【2000张贴纸】贴纸书3-6岁贴画儿童贴画书全套12册贴画贴纸儿童汽，
价格项目：24.8英镑，
价格总和：24.8,
ItemNum: 1，
isSelected:false
},
{
imgUrl: src/assets/upload/P3。 jpg ，
消息：唐诗三百首成语故事全2册一年级课外书精装注音儿童版小学生二三年级课外阅读书籍，
价格项目：29.8英镑，
价格总和：29.8,
ItemNum: 1，
isSelected:false
},
]
}
},
方法：{
变更(id){
设n=this.cartList[id].ItemNum
//控制台。对数(n)；
this.cartList[id].ItemNum
this.cartList[id].PriceSum=this.cartList[id].ItemNum * this.cartList[id].价格项目；
},
更改的id {
if(this.cartList[id].ItemNum===0)警报(该商品已经清0!);
否则{
this.cartList[id].ItemNum-；
this.cartList[id].PriceSum=this.cartList[id].ItemNum * this.cartList[id].价格项目；
}
},
删除项目(id){
//console.log(这个$ parent)；
//console.log(这个。$儿童);
this.cartList.splice(id，1)；
},
allCheck(){
//控制台。日志(这个。全部选中)；
this.cartList.forEach((item)={
//控制台。日志(这个。全部选中)；
//控制台。日志(这个。购物车列表)；
item.isSelected=！this . all已选择
})
},
DeleteSelected(){
对于(设I=0；这是。购物车列表。长度；i ){
if(this.cartList[i].isSelected===true){
this.cartList.splice(i，1)；
}
}
},
DeleteAll(){
this.cartList.splice(0，this。购物车列表。长度)；
},
oneSelected(id){
if(this.cartList[id].isSelected===false)
this.cartList[id].isSelected=true
其他
this.cartList[id].isSelected=false
设n=0；
对于(设I=0；这是。购物车列表。长度；i ){
if(this.cartList[i].isSelected===true)
n；
}
如果(n===这个。购物车列表。长度)这个。全部选中=真；
否则this.allSelected=false
}
},
计算值：{
NumSum() {
设num=0；
this.cartList.forEach((item)={
if(item.isSelected===true)
数字
})
退货数量；
},
总价(){
设totalp=0；
this.cartList.forEach((item)={
if(item.isSelected===true)
totalp=项目价格总和
})
退货总计p
},
}
})
/脚本
样式lang=scss 范围
/风格
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。