教程 框架 组件 接口 其他

for 指令

for 指令用于循环输出一个数组类型的数据

for指令根据源数据数组渲染列表,支持的写法如下(其中{{}}可以省略):

  • for="{{list}}":list为源数据数组,默认的数组元素名为$item
  • for="{{value in list}}":value为自定义的数组元素名,默认的数组元素索引名为$idx
  • for="{{(index, value) in list}}":index为自定义的数组元素索引名,value为自定义的数组元素名

for指令tid属性用于指定数组元素的唯一 Id,若未指定,默认使用数组索引($idx)作为唯一 Id。tid属性的作用在于元素节点重用,优化 for 循环的重绘效率

示例如下:

<template>
  <div class="tutorial-page">
    <!-- 方式1:默认$item代表数组中的元素, $idx代表数组中的索引 -->
    <div class="tutorial-row" for="{{list}}">
      <text>{{$idx}}.{{$item.name}}</text>
    </div>
    <!-- 方式2:自定义元素变量名称 -->
    <div class="tutorial-row" for="value in list">
      <text>{{$idx}}.{{value.name}}</text>
    </div>
    <!-- 方式3:自定义元素、索引的变量名称 -->
    <div class="tutorial-row" for="(personIndex, personItem) in list">
      <text>{{personIndex}}.{{personItem.name}}</text>
    </div>
  </div>
</template>

<style lang="less">
  .tutorial-page {
    flex-direction: column;
    .tutorial-row {
      width: 85%;
      margin-top: 10px;
      margin-bottom: 10px;
    }
  }
</style>

<script>
  export default {
    private: {
      list: [
        {name: 'aa'},
        { name: 'bb' }
      ]
    },
    onInit () {
      this.$page.setTitleBar({ text: '指令for' })
    }
  }
</script>

示例代码中,在渲染页面时,div.tutorial-row的结构,会根据 script 中的数据 list 的定义,被循环的生成多个,tid="uniqueId"表示使用数组list的数组元素$item.uniqueId作为数组元素的唯一 Id

注意:

自定义变量表示 for 指令的数组索引和数组元素时,变量名不可以用$_开头; 使用tid属性时应注意:

  • tid属性指定的数据属性必须存在,否则可能导致运行异常
  • tid属性指定的数据属性要保证唯一,否则可能导致性能问题

条匹配 "" 的结果

    没有搜索到与 "" 相关的内容