vue实现购物车功能（商品分类）
43 浏览量
2020-11-20
19:27:01
上传
评论
收藏 30KB PDF 举报
vue实现购物车功能（商品分类）实现购物车功能（商品分类）
本文实例为大家分享了vue实现购物车功能的具体代码，供大家参考，具体内容如下
new Vue({
el: "#app",
data: {
cIndex: 0,
lists: [
{
title: "推荐商品",
goods: [
{
id: 0,
img: './images/goods.png',
name: '散称樱桃1',
price: '10.00',
num: 0
},
{
id: 1,
img: './images/goods.png',
name: '散称樱桃1',
price: '10.00',
num: 0
}
] },
{
title: "推荐商品",
goods: [
{
id: 2,
img: './images/goods.png',
name: '散称樱桃2',
price: '20.00',
num: 0
},
{
id: 3,
img: './images/goods.png',
name: '散称樱桃2',
price: '20.00',
num: 0
},
] },
],
carArr: [],
appearCar: false,
},
computed:{
alltotal:function () {
var alltotal = 0;
var allNum = 0;
for(var i = 0,len = this.lists.length;i<len;i++){
for(var j = 0,goodsLen = this.lists[i].goods.length;j<goodsLen;j++){
alltotal += parseInt(this.lists[i].goods[j].num)*parseFloat(this.lists[i].goods[j].price);
allNum += parseInt(this.lists[i].goods[j].num);
}
}
return [alltotal,allNum] },
},
methods: {
leftTap: function (index) {
this.cIndex = index
},
showCar: function () {
if (this.carArr.length == 0) {
this.appearCar = false
} else {
资源评论
weixin_38502183
- 粉丝: 11
- 资源: 972
最新资源
- ABAQUS混凝土本构曲线数据（C25、C30、C35、C40、C45、C50...)
- 基于Python Flask框架的金融项目设计源码
- Campus一款简单的后台管理系统，RuoYi-Vue简单版，快速开发框架，适合大学生开发毕设，或其他小项目。使用Spring
- 一个Vue3 Ts Node.js的通用后台管理系统后端
- 1.实现定义学生成绩记录，记录包括字段有：序号、学生姓名、学号、课程名称、成绩。 2.实现学生成绩管理系统的菜单管理功能，允许
- 基于Java的WebBase业务系统框架设计源码
- app.revanced.android.gms.0.3.1.4.240913.23b92906231cf22e7c81ac50707854e2.apk
- 基于ThinkPHP的API文档自动生成系统设计源码
- 基于Spring Boot的健身房管理系统设计源码
- 基于Bootstrap的响应式静态网站设计源码
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
