小程序 wx:for 字典
时间: 2023-10-11 16:05:50 浏览: 148
微信小程序 wx:for的使用实例详解
5星 · 资源好评率100%
在小程序中,`wx:for` 可以用于循环遍历数组或对象,并在模板中动态渲染内容。然而,`wx:for` 只能直接处理数组,不能直接处理字典(对象)。
如果你想循环遍历字典中的键值对,你可以先将字典转换为数组,然后再使用 `wx:for`。以下是一个示例代码:
```js
Page({
data: {
myDict: {
key1: 'value1',
key2: 'value2',
key3: 'value3'
},
myArray: []
},
onLoad: function () {
// 将字典转换为数组
const dict = this.data.myDict;
const arr = [];
for (let key in dict) {
arr.push({
key: key,
value: dict[key]
});
}
this.setData({
myArray: arr
});
}
});
```
在 WXML 文件中,你可以使用 `wx:for` 循环遍历 `myArray` 数组,并动态渲染字典的键值对:
```html
<view wx:for="{{myArray}}" wx:key="key">
<text>{{item.key}}: {{item.value}}</text>
</view>
```
这样,就能够在小程序中循环遍历字典并渲染内容了。
阅读全文