在前端使用uniapp 渲染map<String,List<String>>类型的数据
时间: 2023-11-18 09:18:15 浏览: 85
前端-uniapp-插件
在 uni-app 中,你可以使用 `v-for` 指令来渲染 `Map` 类型的数据。以下是一个示例代码:
```html
<template>
<div>
<div v-for="(value, key) in data" :key="key">
<h3>{{ key }}</h3>
<ul>
<li v-for="(item, index) in value" :key="index">{{ item }}</li>
</ul>
</div>
</div>
</template>
<script>
export default {
data() {
return {
data: new Map([
['key1', ['value1', 'value2']],
['key2', ['value3', 'value4']]
])
}
}
}
</script>
```
在这个示例中,我们使用 `v-for` 指令来遍历 `data` 对象。我们首先使用 `v-for="(value, key) in data"` 遍历每个键值对,然后在内部使用 `v-for="(item, index) in value"` 遍历每个列表中的项。
在每个循环中,我们使用 `key` 和 `value` 分别表示键和值,然后使用 `:key` 绑定 `key` 变量作为唯一的 `key` 属性。
希望这可以帮助你解决问题。
阅读全文