vue多个商品选择与列表显示

// mock数据
classRoom: [
{"id": "598","name": "初中课程全套","now_price": "0.01","price": "880.00","classroomCourse": [{"id": "2434"}],"course": [{"id": "504","name": "初一语文","is_free": 1}, {"id": "629","name": "初一初学","is_free": 1}, ],"isActive": false
},
{"id": "598","name": "高中课程全套","now_price": "0.01","price": "880.00","classroomCourse": [{"id": "2434"}],"course": [{"id": "504","name": "高一语文1","is_free": 1}, {"id": "629","name": "高二数学2","is_free": 1}, ],"isActive": false
}
]

1.处理数据

// 前端js添加 isActive 字段显示隐藏数据（如果后端有类似字段无需此步骤）
// this.classRoom是要渲染的数据
this.classRoom.forEach((item ,index) => {this.arr.push(Object.assign({},item,{isActive: false})) // 添加isActive
})
// 默认选中价格最低的商品
var currentMIN = null
for (var index in this.arr) {var item = this.arr[index]if (currentMIN === null) {currentMIN = index} else if (Number(item.now_price) < Number(this.arr[currentMIN].now_price)) {currentMIN = index}
}
this.arr[currentMIN].isActive = true

2. 渲染标签

<view :class="[arr[index].isActive ? 'tags-active' : 'tags']" v-for="(item, index) in arr" :key="index" @click="clickTag(index)">{{ item.name }}
</view>

3. 渲染标签下的内容

<view v-show="arr[index].isActive" v-for="(item, index) in arr" :key="index"><view class="course-name" v-for="(itemChild, i) in item.course" :key="i">{{ itemChild.name }}</view>
</view>

4. 控制标签高亮和标签内容显示事件

clickTag(index){this.arr[index].isActive = !this.arr[index].isActive
}

效果1（未选择课程）：

效果二（选中一个课程）：

效果二（选中多个课程）：

vue多个商品选择与列表显示相关推荐

基于vue实现sku商品选择
这是个人在理解sku思路后,参考淘宝用vue来实现的,有更好的方式,大家提醒一下. 组件设计: 关于sku商品选择的实现思路,大家可以看看:sku商品选择实现思路组件变量设置: 变量设置前大家一定要 ...
vue中实现商品购物车全选反选
项目需求: 实现一个购物车全选框实现对商家和商品的全选商家全选框实现对当前商家所有商品的全选取消其中一个商品则取消对应商家全选和全选框选中一个商家下的所有商品则勾选对应商家的全选框,不勾选全选 ...
选择商品的时候，弹不出来商品选择框
问题描述:在使用管家婆软件选择商品的时候,弹不出来商品选择框,点击商品全名和商品属性这两列,完全没有反应. 解决办法: 打开库存状况表,检查是否有金额超大的情况,分仓库查看下,如果有,做好备份调整下: ...
vue、Cascader 级联选择、Cascader 属性事件方法、vue Cascader 所有级联选择样式、vue Cascader 级联选择全部属性事件方法
vue.Cascader 级联选择.Cascader 属性事件方法.vue Cascader 所有级联选择样式.vue Cascader 级联选择全部属性事件方法 Cascader 级联选择何时使用 ...
vue-select-tu--一款基于vue的多元图形选择插件
vue-select-tu 一款基于vue的多元图形选择插件 Table of Contents Security Install Usage Maintainers Contributing Lic ...
Vue + Element + Table 分页选择勾选和取消勾选的问题
Vue + Element + Table 分页选择勾选和取消勾选的问题问题描述: 需求是这样的===>表格前面每条数据都有复选框吧然后表格有很多页 , 我从第一页选取N条数据再去其他页 ...
为您的 Vue.js 应用程序选择最佳电子商务平台
自大流行以来,在线购物活动有所增加.2020 年,超过20 亿人在线购买了产品或服务,而且这一数字只增不减.预计到 2022 年底,仅美国的电子商务行业就将成为一个万亿美元的行业. 我们想涉足蓬勃发展 ...
sku商品选择实现思路
本人在模仿淘宝sku商品选择,从刚开始没有sku数据,关于sku是什么,大家自己先了解下,一直到实现出来,花了一个星期,走了不少弯路,参考了不少的别人的文章和视频.这里总结一下,如果你脑子也很混乱,可 ...
vue实现计算商品sku笛卡尔积（干活）
在 Vue 中计算商品 SKU 的笛卡尔积,您可以按照以下步骤进行: 定义商品属性和属性值在 Vue 组件中定义商品属性和属性值,可以使用对象或数组来表示: // 商品属性 const attrib ...

vue多个商品选择与列表显示

1.处理数据

2. 渲染标签

3. 渲染标签下的内容

4. 控制标签高亮和标签内容显示事件

vue多个商品选择与列表显示相关推荐

最新文章

热门文章