列表渲染

循环指令（aip-for）

aip-if 实现基于一个数组渲染一个列表的能力，示例：

<div aip-state="{ colors: ['green', 'red', 'pink'] }">
    <aip-view aip-for="color in colors">
        <span>{{ color }}</span>
    </aip-view>
</div>

你也可以添加 key 属性：

<div aip-state="{ colors: ['green', 'red', 'pink'] }">
    <aip-view aip-for="color in colors" [key]="color">
        <span>{{ color }}</span>
    </aip-view>
</div>

key 用来维护更新的策略，当没有 key 时，AIP 很难追踪到哪些元素需要更新，哪些不需要，而通过加入 key 属性后， AIP 可以追踪到哪些被增加或删除了，这样可以高效的实现 DOM 操作。

访问索引

如果你需要访问迭代中的索引，你可以用 ([item], [index] in [items]) 这样的语法来实现：

<div aip-state="{ colors: ['green', 'red', 'pink'] }">
    <aip-view aip-for="(color, index) in colors" [key]="color">
        <span>{{ index }}: {{ color }}</span>
    </aip-view>
</div>

使用数字来迭代一个范围

aip-for 同样接受一个整数，代表迭代的次数，例如：

<div aip-for="i in 10">{{ i }}</div>

上面会显示从 1 到 10 的数字（注意不是从 0 开始）。