學習微信小程式WXML之條件渲染

2021-08-18 21:15:14 字數 766 閱讀 2283

這是乙個解決今天吃什麼這一大難題的一小段**。

今天吃什麼?view>

wx:if="

}">

餃子view>

wx:elif="

}">

公尺飯view>

wx:else>

麵食view>

page(

})

當頁面傳入的condition變數的值為1時,今天就吃餃子,當值為2時,今天就吃公尺飯;當為其他值時,今天就吃麵食。js檔案裡就是condition變數生成乙個1-3的隨機整數。math.random()生成0-1的浮點隨機數,math.floor()對浮點數處理來返回乙個向下取整的整數。

渲染結果:

wx:if和hidden的區別

這兩個都能控制元素的顯示,但wx:if的條件在切換時,框架會有乙個區域性渲染的過程,從而確保條件塊在渲染時可以銷毀,並進行重新渲染。而hidden屬性始終都會渲染,通過hidden屬性可以控制檢視上的顯示或隱藏。一般來說,wx:if有更高的切換消耗,hidden有更高的初始話渲染消耗。所以如果元素要頻繁切換的話,用hidden更好。

微信小程式 框架wxml(三)wxml條件渲染

記錄一下wxml的條件渲染,1.使用wx if wxml的 true 5 length 5 2 length 2 其他 在js的data為condition賦值為true,length賦值為6 效果圖 2.block wx if,用block對一組view進行組裝,可以控制一組view的顯示與隱藏 ...

微信小程式學習日誌 wxml框架之條件渲染特性簡述

條件渲染就像是c 裡的條件語句而已,感受一下條件渲染特性 如圖,在頁面wxml檔案中寫下如下 由condition的值來判斷輸出 當代青年的任務是什麼 的答案 condition的值在該頁面js檔案中利用資料繫結賦值,並且用了兩個不同的函式。math.floor函式是將數字往下取整,相當於c 裡的f...

微信小程式 框架wxml(六)wxml引用

wxml提供兩種引用方式,import和include 1.import和include的區別 1 import 可以在檔案中使用被import檔案中定義的template include可以在檔案中使用template及template外的內容。2 import有作用域的概念,只能引用直接impo...