wxml模板语法-条件渲染

wx:if

在小程序中，使用 wx:if="{{flag}}" 来判断是否渲染该代码块

<view wx:if=“{{flag}}”> TRUE </view>

也可以使用 wx:elif 和 wx:else 来添加 else判断：

<view wx:if=“{{type===1}}”>男</view>
<view wx:elif=“{{type===2}}”>女</view>
<view wx:else>保密</view>

如果需要一次性控制多个组件的展示和隐藏可以结合 block 标签包裹处理

<block wx:if=“{{flag}}”>
    <view>1</view>
    <view>2</view>
    <view>3</view>
</block>

hidden

在小程序中，直接使用 hidden="flag" 属性也能对元素进行显示与隐藏

  <view hidden="flag">flag为true隐藏，为false显示</view>

wx:if 和 hidden区别

运行方式不同

• wx:if 以动态创建和移除元素的方式，控制元素显示与隐藏
• hidden 以切换样式的方式，控制元素显示与隐藏

<view wx:if=“{{!flag}}”> wx:if </view>
<view hidden=“flag”> hidden </view>
<!--hidden值可以不用Mustache语法格式-->

从微信开发者工具的调试器里面的 Wxml 里面可以看出，hidden属性是通过控制其display:hidden**来隐藏元素，而 **wx:if** 是暴力创建和删除元素来控制隐藏。 也就是说前者可以看到view`元素标签，后者啥也没有

二者使用场景：当需要频繁切换(tab导航栏),建议使用hidden，当控制条件复杂，建议使用wx:if套装