vue根据接口返回的嵌套循环数组，添加选择样式

最新推荐文章于 2023-09-15 17:50:18 发布
最新推荐文章于 2023-09-15 17:50:18 发布
阅读量598 收藏
点赞数
分类专栏： uni vue 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/B2689429488/article/details/127999235
版权
本文介绍了如何在Vue.js应用中处理接口返回的嵌套循环数组，特别是在显示商品规格（如颜色和尺寸）时，添加选择状态的样式。通过解析goodList对象，遍历specs数组及其内部的specValueList，动态设置选中项的样式。示例代码展示了HTML模板和JavaScript逻辑，帮助开发者理解实现过程。
摘要由CSDN通过智能技术生成

效果图：
在这里插入图片描述

接口数据返回数组如下：
goodList:{
specs: [ {
specId: 8,
specName: “颜色”,
specValueList: [{id: 74, label: “白色”, value: “74”}, {id: 75, label: “蓝色”, value: “75”}]
},
{
specId: 9，
specName: “尺寸”，
specValueList: [{id: 82, label: “小”, value: “82”}, {id: 80, label: “大”, value: “80”}]
}
]
}
html部分

<view class="SpecificationsBox">
	<view class="SpecificationsItem" v-for="(item,inde
最低0.47元/天 解锁文章
B2689429488
关注
专栏目录
Vue3 - Arco Design Vue 表格组件a-table“表格行数据中又嵌套了二维对象数组“，按平级循环渲染(嵌套数组视为同级行数据)， 对嵌套的数组循环展示为表格，智能合并行或列详细教程
王佳斌
07-02 1827
vue3，nuxt3，arco-design-vue，table表格组件，a-table，vue3 arco表格组件，平常都是数组中一个对象渲染成一行，每行中还有嵌套数组怎么办，每个行数据下还有一个数组怎么显示，怎么把表格相同的数据合并为一行，合并上下两行相同数据单元格，合并行或列如果遇到相同单元格就合并为一个，合并上下两行相同数据单元格，数据中有二维数组怎么遍历循环显示，表格数据带二级数组怎么循环渲染显示，表格数据中存在一个数组要怎么才能显示到表格，a-table表格合并详细教程示例，table表格如果对
echarts处理返回的图例和数据是数组嵌套数组格式时的方法
weixin_43258184的博客
03-14 1818
当返回的数据格式是单个数组的时候，可以直接循环datas传入echarts组件进行复用。 处理方式：tableData是接口的datas对象数据。 <el-scrollbar ref="scrollbar" style="height:100%; width:100%;"> <el-row type="flex" justify="space-between" style="flex-wrap:wrap;height:30%"> <el-c
vue.js 双层嵌套for遍历的方法详解, 类似php foreach()
10-18
今天小编就为大家分享一篇vue.js 双层嵌套for遍历的方法详解, 类似php foreach()，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue 数组中嵌套数组_在vue中嵌套数组循环？
weixin_26843605的博客
01-30 2378
我将如何使用v-for循环下面的JSON对象？我想循环所有ID / Numbers，以及每个数字中的所有项目，并将它们全部显示在列表中......我知道我可以使用_1210023轻松循环所有system_events但是如何循环所有不同的ID / Numbers，以及所有里面的物品？我的JSON看起来像：{"system_events": {"1013": [{"id": 25899,"times...
前端Vue中接口v-for循环列表交叉每一项并且添加新内容新样式，可调循环位置看图
m0_49714202的博客
01-28 1471
<template> <!-- 调换位置 --> <div class="box"> <!-- %前端代表 取余数 --> <!-- index从0开始下标，奇数标index % 2 是1 ，偶数标是0，0代表false，非0的1代表true --> <ul style="list-style-type: none"> <li class="list-item" v-for="(item
TS(Vue)中数组的接口类型使用
wendZzoo的博客
04-29 8306
首先出现的问题是，我需要一个数组list，数组中每一项需要是key：value形式的对象，但是当我需要新增一项到数组中时候，对于每一项即对象的类型出现问题，问题如下： 这是因为我定义了list类型为数组，但是并没有对其中的对象的属性进行类型定义。 这里就需要使用TS的接口，我们需要自定义一下list数组类型，使用接口就可以自定义list中属性的类型。 先定义接口： interface Iitem...
vue——双层循环嵌套
weixin_44613294的博客
01-23 1万+
1.首先你的json数据至少是两层结构 menus: [ { &quot;Name&quot;: &quot;景区概况&quot;, &quot;Items&quot;: [ {&quot;Score&quot;: &quot;景区简介&quot;, &quot;path&quot;: &quot;/Over
php双层foreach,vue.js 双层嵌套for遍历的方法详解, 类似php foreach()
weixin_35761085的博客
03-19 665
vue.js 双层嵌套for遍历的方法详解, 类似php foreach()主要运用 template 标签，可相当于 php foreach()foreach(lists as $key){//todoforeach($key.自定义字段 as k){//todo}}以上这篇vue.js 双层嵌套for遍历的方法详解, 类似php foreach()就是小编分享给大家的全部内容了，希望能给大家一...
vue.js 双层嵌套 for 遍历方法, 类似php foreach（）
热门推荐
Jesse
05-03 1万+
主要运用 template 标签，可相当于 php foreach（） foreach（lists as $key）{ //todo foreach($key.自定义字段 as k){ //todo } }<template v-for="key in lists" v-cloak> <tr>
uni-app基于vue的写法，列表渲染，循环嵌套数组v-for，也可用于vue。循环嵌套循环的方法
qq_43608394的博客
03-18 4968
页面html部分 <view class="shoping-sify" v-for="(item,index1) in shopList" :key="index1"> <view class="shoping-sifytitle">{{item.liTitle}}</view> <view class="shoping-total"> ...
vue2.0使用v-for循环制作多级嵌套菜单栏
08-27
在Vue2.0中，创建一个可扩展的多级嵌套菜单栏是一个常见的需求，尤其在构建复杂的Web应用时。本篇文章将详细讲解如何利用`v-for`指令来实现这一功能。 首先，我们需要理解`v-for`循环在Vue中的工作原理。`v-for`是...
如何将本地代码上传到git
浅墨の技术空间
10-29 836
在工作的过程中，我们有时候随手在idea上建了一个工程。然后写着写着觉得写得挺好，想上传到github上。 基于GitHub界面化的优势，我们首先可以手动进行，以下是手动进行的步骤： 现在GitHub创建一个项目 把本地项目目录直接拖至刚才创建的项目下 好了，这样你的项目就在GitHub上了，但是你并没有进行关联项目，以后你每次本地改完代码就要重复以上步骤。 所以身为一个合格的码农，我们应该学会使用git命令。 以下步骤将本地代码关联至GitHub项目的一种方式： 在GitHub上创建一个项目
vue 前端调后端接口获取得到一个数组，后续需要往数组里面加数据
weixin_46939404的博客
02-17 1253
vue 前端调后端接口获取得到一个数组，后续需要往数组里面加数据
004-接口-数组
赳赳万里鲲
04-20 1119
单一元素声明 let cars:string[]; cars = ["BYD", "WuLing", "HongQi"]; 多维数组声明 let cars:string[][]; cars = [["BYD", "WuLing", "HongQi"], ['LiXiang', 'WeiLai', 'XiaoPeng'] ]; 元素为对象的复杂数据 interface ObjType { key: string; title: string; } interface TabArr .
vue 获取后端json返回嵌套对象渲染问题
sout-lanys
01-04 6464
项目场景： 在前端项目中会遇到后端返回一个对象中存在多个实体的对象，若我们直接渲染(直接渲染第三级)，例如： html: <span>设备IMEI：{{items.deviceVO.imei}}</span><br> data: data () { items: '' } 虽然不影响渲染，但vue在浏览器会抛出警告。 问题描述及原因分析： 问题: Error in render: “TypeError: Cannot read properties of und
vue循环渲染接口数据
qq_36956996的博客
11-10 1102
最简单的vue循环渲染接口数据 app = new Vue({ el: '#app', data:{ sites:[] }, mounted(){ axios.get("url").then(response=>(this.sites=response.data.data)) }, }); <
将接口集合返回dataList集合，便利到每行两个div的item中
最新发布
qq_25983579的博客
09-15 320
将接口集合返回dataList集合，便利到每行两个div的item中
vue3中实现树形结构数据的嵌套删除和批量修改
Y1_1Y1_1y1_1y的博客
03-05 1653
递归算法实现数据扁平化处理 function filterData(data) { data.forEach(item=>{ if(!item.children) { newList.push(item.cid) return false } else { newLi
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值