WeChat applet conditional rendering wx: if and the difference and precautions

Two methods can achieve conditional rendering of page elements

1. wx:if、wx:elif、wx:else
2. Hidden usage, add attribute hidden or hidden = "{{true}}" directly on the label

Which one is used in which scene?
When the label is not frequently switched, use wx: if first, and remove the label directly from the page structure.
When the label is frequently switched, use hidden, and switch the display by adding styles.
Note: Don't use hidden attribute with style display! Will be overwritten, because the principle of hidden is to increase 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>

Print the result: