a:for
在组件上使用a:for属性可以绑定一个数组,即可使用数组中各项的数据重复渲染该组件。
数组当前项的下标变量名默认为index,数组当前项的变量名默认为item。
<view a:for="{{array}}">
{{index}}: {{item.message}}
</view>
Page({
data: {
array: [{
message: 'foo',
}, {
message: 'bar',
}],
},
});
使用a:for-item可以指定数组当前元素的变量名。使用a:for-index可以指定数组当前下标的变量名。
<view a:for="{{array}}" a:for-index="idx" a:for-item="itemName">
{{idx}}: {{itemName.message}}
</view>
a:for支持嵌套。以下是九九乘法表的嵌套示例代码。
<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
与block a:if类似,可以将a:for用在
<block a:for="{{[1, 2, 3]}}">
<view> {{index}}: </view>
<view> {{item}} </view>
</block>
a:key
如果列表项位置会动态改变或者有新项目添加到列表中,同时希望列表项保持特征和状态(比如中的输入内容,
a:key的值以两种形式来提供:
- 字符串:代表列表项某个属性,属性值需要是列表中唯一的字符串或数字,比如 ID,并且不能动态改变。
- 保留关键字*this,代表列表项本身,并且它是唯一的字符串或者数字,比如当数据改变触发重新渲染时,会校正带有key的组件,框架会确保他们重新被排序,而不是重新创建,这可以使组件保持自身状态,提高列表渲染效率。
说明:
- 如不提供a:key,会报错。
- 如果明确知道列表是静态,或者不用关注其顺序,则可以忽略。
示例代码:
<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是比a:key更通用的写法,里面可以填充任意表达式和字符串。
说明:key不能设置在 block 上。
示例代码:
<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 });
}
},
});
同时可以利用key来防止组件复用,例如允许用户输入不同类型数据:
<input a:if="{{name}}" placeholder="Enter your name" />
<input a:else placeholder="Enter your email address" />
那么当输入 name 然后切换到 email 时,当前输入值会保留,如果不想保留,可以加key:
<input key="name" a:if="{{name}}" placeholder="Enter your name" />
<input key="email" a:else placeholder="Enter your email address" />