两种方法可以对页面元素实现条件渲染
- wx:if、wx:elif、wx:else
- hidden 用法,在标签上直接加入属性 hidden或hidden="{{true}}"
什么场景下用哪个
当标签不是频繁的切换显示 优先使用 wx:if,直接把标签从 页面结构给移除掉
当标签频繁的切换显示的时候 优先使用 hidden,通过添加样式的方式来切换显示
注意:hidden 属性 不要和样式 display一起使用!会被覆盖掉,因为hidden的原理就是增加display:none
<view>
<view>**条件渲染**</view>
<view wx:if="{{true}}">显示</view>
<view wx:if="{{false}}">隐藏</view>
<view wx:if="{{flase}}">1</view>
<view wx:elif="{{flase}}">2 </view>
<view wx:else> 3 </view>
<view hidden >hidden1</view>
<view hidden="{{false}}" >hidden2</view>
<view wx:if="{{false}}">wx:if</view>
<!-- 错误用法 :hidden无法被隐藏 -->
<view hidden style="display: flex;" >hidden</view>
</view>
打印结果: