小程序学习 (AXML--- 2.条件渲染 列表渲染)

条件渲染

1.a:if --- a:elif --- a:else

类似于vue中v-if、v-else用法。不做赘述。条件为true时，才开始渲染。

2.hidden

hidden类似于vue中v-show用法。不做赘述。元素始终被渲染，只是控制是否展示。

3.block a:if

若需要一次控制多个组件是否展示，则包裹在<block>标签中。<block>不会被渲染，只是起包裹作用。

<block a:if="{{true}}">
  <view> view1 </view>
  <view> view2 </view>
</block>

列表渲染

1.a:for

类似于v-for用法，数组当前项的下标变量名默认为 index，数组当前项的变量名默认为 item。使用 a:for-item 可以指定数组当前元素的变量名。使用 a:for-index 可以指定数组当前下标的变量名。

<view a:for="{{array}}" a:for-index="idx" a:for-item="itemName">
  {{idx}}: {{itemName.message}}
</view>

Page({
  data: {
    array: [{
      message: 'foo',
    }, {
      message: 'bar',
    }],
  },
});

2.a:key

列表项的唯一标识。

a:key 的值以两种形式来提供：

• 字符串：代表列表项某个属性，属性值需要是列表中唯一的字符串或数字，例如 ID，并且不能动态改变。
• 保留关键字 *this，代表列表项本身，并且它是唯一的字符串或者数字，例如当数据改变触发重新渲染时，会校正带有 key 的组件，框架会确保数据重新被排序，而不是重新创建，这可以使组件保持自身状态，提高列表渲染效率。