微信小程序条件渲染wx:if与的区别及注意事项

两种方法可以对页面元素实现条件渲染

1. wx:if、wx:elif、wx:else
2. 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>

打印结果：