微信小程序:wx:for循環輸出的使用方法以及簡單例子


條件渲染

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>

渲染結果:

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM