條件渲染
wx:if
在框架中使用wx:if ="{{xxx}}"來判斷是否需要渲染該段代碼,如果xxx值為假(false、underdined、0或者NAN),則不會渲染。
列表渲染
wx:for
在框架中使用wx:for來控制屬性綁定到一個數組,循環該數組來循環渲染該組件。
語法:
wx:for={{xxx}}
書寫位置:某一個組件的屬性部分
此時可以在該指令所在的組件上 通過:
{{index}}:數組下標
{{item}}:數組當前項
這兩種方式來分別插入索引和值
demo:
<text wx:key="{{this}}" wx:for="{{arr}}">{{index}}{{item}}</text>
arr:
data: {
arr: ["a", "b", "c"]
},
渲染結果:
0a1b2c
循環指令的子指令
單層循環沒有任何問題,多層循環將會出現問題:
內層循環中{{index}} {{item}}
外層循環中{{index}} {{item}}
如果想要在內層循環中使用外層循環的某一個值或者下標,默認情況下覆蓋 用不到外面的
wx:for-index="xxx" 自定義索引
wx:for-item="xxx" 自定義成員
demo: 99乘法表
< view wx:key="{{this}}" wx:for="{{9}}" wx:for-index="key" wx:for-item="value">
<text wx:key="{{this}}" wx:for="{{value + 1}}" >{{key + 1}}*{{item + 1}}={{(key + 1) * (item + 1)}} </text>
</view>
渲染結果: