vuejs购物车,vue写的购物车详细步骤
这篇文章主要为大家详细介绍了某视频剪辑软件实现简易购物车页面，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
VUE实现简易购物车效果，供大家参考，具体内容如下
简易的购物车小演示
引用了一下bootstrap3，的表格
节id=购物车
table class=table table-hover
四羟乙基己二酰胺
tr
泰国(泰国)
input type= checkbox @ change= handle change v-model= isAllChange @ click= in show()/
全选
/th
泰国(泰国)商品信息/th
泰国(泰国)单价/th
泰国(泰国)数量/th
泰国(泰国)金额/th
泰国(泰国)操作/th
/tr
/thead
在需要分行下载处加上
tr style= height:50px；/tr
tr v-for=(date，index)in arr :class= { bgcolor:is active }
任务描述
input type= checkbox v-model= check group :value= date @ change= handleLiChange /
img :src=date.imges/
{{date.name}}
/td
任务描述
p{{date.networkType}}/p
p{{date.colorClass}}/p
p{{date.packageType}}/p
p{{date.rom}}/p
p{{date.purchaseMethod}}/p
英国铁路公司
/td
任务描述
pb class=贾丹{date.price}}/b/p
/td
任务描述
button @ click= handleDelclike(date)-/button
输入类型=text :值=date.numbers/
button @ click= date。数字/按钮
/td
任务描述
Pb class= jiner { { getSumje(date)} }。00英镑/英镑/便士
/td
任务描述
p移入收藏夹/p
a href=# @click=rmove(index)删除/a
/td
/tr
/tbody
/表格
div class=box
div class=boxa
input type= checkbox @ change= handle change v-model= isAllChange @ click= in show()/
a href=# 全选/a
a href=# 删除/a
/div
div class=boxc
p已选商品：b class= jiner { { check group。长度} }/b/p
p合计（不含运费):b class=jiner{{getSum()}}b/p
/div
div class=boxb
结算
/div
/div
/部分
CSS:
#购物车{
宽度：1200像素
高度：
边距：0自动；
}。方框{
宽度：1200像素
高度：50px
边距：30px自动；
显示器：flex
justify-content:space-between；
对齐-项目：居中；
背景色：# C4E3F3
}。boxa {
宽度：780像素
高度：50px
}。盒子一个{
右边距：50px
}。方框b {
宽度：120像素
高度：50px
背景色：# C0C0C0
显示器：flex
对齐-项目：居中；
对齐-内容：居中；
颜色：白色；
字体大小：18px
}。boxc {
宽度：300像素
高度：50px
显示器：flex
对齐-项目：居中；
justify-content:space-between；
}
输入{
宽度：50px
文本对齐：居中；
}
img {
宽度：60px
高度：60px
}
一个{
文字-装饰：无；
颜色：# 000;
}
* {
字体大小：12px
}
p {
边距：0;
填充：0;
行高：1.9;
}。贾丹{
字体大小：16px
}。金儿{
字体大小：18px
颜色：# FF8C00
}。bgcolor{
背景色：rgba(205，205，205，0.2)；
}
js:
var gouwuche=new Vue({
埃尔： #狗屋车，
数据：{
检查组：[],
isAllChage:假，
isActive:假的，
arr:[
{
//商品名
名称：小米注8专业版，
//图片地址
imges:img/t1.jpg ，
//颜色分类
colorClass:机身颜色：冰翡翠，
//网络类型
网络类型：网络类型：4G全网通，
//套餐类型
包类型：套餐类型：官方标配，
//存储容量
rom:存储容量：6 128GB ，
//购买方式
purchaseMethod:官方旗舰店，
//单价
价格：1299.00,
//数量
数字：1,
//金额
钱：1299.00,
//索引
id:“1”，
},
{
//商品名
名称：红米k30 5G ，
//图片地址
imges:img/t3.jpg ，
//颜色分类
colorClass:机身颜色：紫玉幻境，
//网络类型
网络类型：网络类型：5G全网通，
//套餐类型
包类型：套餐类型：官方标配，
//存储容量
rom:存储容量：8 128GB ，
//购买方式
purchaseMethod:官方旗舰店，
//单价
价格：1499.00,
//数量
数字：1,
//金额
钱：1499.00,
//索引
id:“2”，
},
{
//商品名
名称：红米k30专业版，
//图片地址
imges:img/t4.jpg ，
//颜色分类
colorClass:机身颜色：象牙白，
//网络类型
网络类型：网络类型：5G全网通，
//套餐类型
包类型：套餐类型：官方标配，
//存储容量
rom:存储容量：8 256GB ，
//购买方式
purchaseMethod:官方旗舰店，
//单价
价格：3999.00,
//数量
数字：1,
//金额
钱：3999.00,
//索引
id:“3”，
},
{
//商品名
名称：红米k20 Pro ，
//图片地址
imges:img/t4.jpg ，
//颜色分类
colorClass:机身颜色：象牙白，
//网络类型
网络类型：网络类型：5G全网通，
//套餐类型
包类型：套餐类型：官方标配，
//存储容量
rom:存储容量：8 256GB ，
//购买方式
purchaseMethod:官方旗舰店，
//单价
价格：3999.00,
//数量
数字：1,
//金额
钱：3999.00,
//索引
id:“3”，
}
],
},
方法：{
inshow:function(){
this.isActive=！这是主动的
},
//总额
getSum:function(){
var sum=0；
对于(这个。核对字组中的变量I){
sum=this.checkgroup[i].numbers * this.checkgroup[i].价格；
}
返回总和；
},
//单品总额
getSumje:函数（日期){
var sum=日期.价格
sum *=日期。数字；
返回总和；
},
//判断全选框
handlechange:function(){
if(this.isAllChange){
这个。检查组=this。arr
}否则{
这个。检查组=[]；
}
},
//判断全选框
handleLiChange:function(){
if(this.checkgroup.length！==this.arr.length){
this.isAllChange=false
}否则{
this.isAllChange=true
}
},
//数量减一
handleDelclike:函数（日期){
定义变量数字=日期。数字-；
if(numbers===1){
日期。数字=1;
}
},
//删除
rmove:函数（索引){
变那个=这个
那。由…改编拼接(索引，1);
that.checkgroup.splice(index，1)；
}
}
})
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。