a:for
Use a:for
attribute on a component to bind an array and use data of each item in the array to re-render this component.
The subscript variable name of the current item in the array is index
by default, the variable name of the current item in the array is item
by default.
<view a:for="{{array}}">
{{index}}: {{item.message}}
</view>
Page({
data: {
array: [{
message: 'foo',
}, {
message: 'bar',
}],
},
});
Use a:for-item
to specify the variable name of the current element in the array. Use a:for-index
to specify the variable name of the current subscript in the array.
<view a:for="{{array}}" a:for-index="idx" a:for-item="itemName">
{{idx}}: {{itemName.message}}
</view>
a:for
supports embedding.The following is the embedded sample code for Chinese multiplication table.
<view a:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" a:for-item="i">
<view a:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" a:for-item="j">
<view a:if="{{i <= j}}">
{{i}} * {{j}} = {{i * j}}
</view>
</view>
</view>
block a:for
Similar to block a:if
, you can use a:for
on the<block/>
tag to render a structural block that contains multiple nodes.
<block a:for="{{[1, 2, 3]}}">
<view> {{index}}: </view>
<view> {{item}} </view>
</block>
a:key
If positions of list items dynamically change or a new item is added to the list, and you want to retain features and statuses of list items (for example, the input content in<input/>
and the selected status of <switch/>
), you need to use a:key
to specify a unique identifier for each list item.
The value of a:key
are provided in two forms:
- String: represents an attribute of the list item, the attribute value needs to be a unique string or number in the list, such as ID, and cannot be dynamically changed.
- The reserved word
*this
represents the list item itself and is a unique string or number. For example, when data change triggers a re-render, components withkey
will be corrected, the framework will ensure that the list items are reordered rather than recreated. This ensures components retain their statuses and improves the efficiency of list rendering.
- If
a:key
is not provided, an error will occur. - If you know that the list is static, or you do not need to pay attention to the list order, then
a:key
can be ignored.
Code sample:
<view class="container">
<view a:for="{{list}}" a:key="*this">
<view onTap="bringToFront" data-value="{{item}}">
{{item}}: click to bring to front
</view>
</view>
</view>
Page({
data:{
list:['1', '2', '3', '4'],
},
bringToFront(e) {
const { value } = e.target.dataset;
const list = this.data.list.concat();
const index = list.indexOf(value);
if (index !== -1) {
list.splice(index, 1);
list.unshift(value);
this.setData({ list });
}
},
});
key
key
is a more common style of writing compared with a:key
, which can be filled with arbitrary expressions or strings.
key
cannot be set on a block.Code sample:
<view class="container">
<view a:for="{{list}}" key="{{item}}">
<view onTap="bringToFront" data-value="{{item}}">
{{item}}: click to bring to front
</view>
</view>
</view>
Page({
data:{
list:['1', '2', '3', '4'],
},
bringToFront(e) {
const { value } = e.target.dataset;
const list = this.data.list.concat();
const index = list.indexOf(value);
if (index !== -1) {
list.splice(index, 1);
list.unshift(value);
this.setData({ list });
}
},
});
At the same time, you can use key
to avoid using a component repeatedly, for example, you can allow different types of data:
<input a:if="{{name}}" placeholder="Enter your name" />
<input a:else placeholder="Enter your email address" />
When you input the name value and switch to email, the current input value will be retained. If you do not want to retain the input value, you can add key
.
<input key="name" a:if="{{name}}" placeholder="Enter your name" />
<input key="email" a:else placeholder="Enter your email address" />