v-for遍历 Map 的 value 中存放的是一个 List

下列代码展现的是一种比较复杂的情况,在 Map 的 value 中存放的是一个 List

<view>
		<uni-collapse v-for="(item,index) in dataList" :key="index">
			<uni-collapse-item :show-animation="true" :open="true" :title="item.name">
				<view style="padding: 30upx;">
					<view class="" v-for="(i,t) in item.classList" :key="t">
						<view class="">
							{{i.name}}<text class="">{{i.desc}}</text>
						</view>
						<view class=" " v-for="(m,n) in i.goodsList" :key="n">
							<view class="">
								{{m.name}} <text class="">{{m.desc}}</text>
							</view>
							
						</view>
					</view>
				</view>
			</uni-collapse-item>
		</uni-collapse>
	</view>

简单的来说,就是这样:

<view v-for="(value, key) in list" :key="key">

	<view v-for="v in value" :key="v.id">
		<text>{{v.name}}</text>
	</view>
</view>
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue2,使用`v-for`遍历`Map`可以通过以下方式进行操作。首先,需要将`Map`转换为一个数组才能进行遍历。可以使用`Array.from()`或者``来进行转换。然后,使用`v-for`指令来进行循环遍历,在循环过程可以使用`(value, key)`语法来获取`Map`的键值对。例如,如果`map`是一个`Map`对象,可以这样遍历它: ``` <template> <div> <div v-for="(value, key) in Array.from(map)" :key="key"> {{ key }}: {{ value }} </div> </div> </template> <script> export default { data() { return { map: new Map([ ['key1', 'value1'], ['key2', 'value2'], ['key3', 'value3'] ]) } } } </script> ``` 上面的代码将会遍历`map`的所有键值对,并在页面显示出来。每个键值对都可以通过`value`和`key`来访问。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [v-for遍历Map分析](https://blog.csdn.net/attack_breast/article/details/120748912)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *3* [Vue使用v-for遍历map](https://blog.csdn.net/m0_54866636/article/details/123704386)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值