在小程序的不同生命周期和不同的用户操作情况下,可能需要为用户展示和相应不同的内容,在这个时候,我们可以借助条件渲染来展示内容。
1、列表渲染:
1.1 控制单个组件的显示:
在组件上加入wx:if来控制组件的显示与隐藏。
- 当wx:if对应的值为true时,对应组件会进行渲染
- 当wx:if对应的值为false时,对应组件不会进行渲染
<view wx:if="{{condition}}"> True </view>
2、加入else属性:
- wx:if:进行条件判断时,使用wx:if来进行初始的条件判断,可以单独出现
- wx:elif:如果项目不止两个判断结果,使用wx:elif来辅助进行结果的输出
- wx:else:如果需要进行多种条件判断结果,使用wx:else来辅助进行结果的输出
<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>
3、多个组件的显示控制:
使用辅助标签<block>
对多个组件进行显示控制。
4、wx:if
和hidden
的区别:
-
wx:if
:根据值来判断组件是否需要渲染进入界面。 -
hidden
:始终会进行渲染,但是会根据其值决定是否在界面中显示。 - 如果组件的显示切换频繁,就使用
hidden
,反之则使用wx:if
网友评论