1.基本用法

在框架中，使用 wx:if="{{condition}}" 来判断是否需要渲染该代码块，.wxml文件代码示例

小白教程网www.2d5.net

<block wx:if="{{true}}">
  <view> view1 </view>
  <view> view2 </view>
</block>

注意：我们if条件语句后面的{{true}}，里面的true或者false不能添加单引号或者双引号；如果添加了单引号或者双引号，里面的内容变成字符串都会被解析成true。

2.单独的if语句。

在小程序中对应的.js文件里面的data区块定义变量shuzi（数值为5），然后在对应的.wxml页面使用if语句来判断变量（shuzi）是否大于2，如果大于2则显示“if条件为true则显示”。下面举例说明。

.js文件中变量的定义示例

小白教程网www.2d5.net

  data: {
    shuzi:5
  },

.wxml文件代码示例

小白教程网www.2d5.net

<view wx:if="{{shuzi>2}}">
    <view>if条件为true则显示</view>  <!—shuzi这个变量的值为5，大于2，该内容将显示-->
</view>

3.elif和else语句。

在小程序中对应的.js文件里面的data区块定义变量shuzi（数值为5）然后在对应的.wxml页面使用if语句来判断变量（shuzi）是否大于2；如果小于2则显示“小于2”，如果大于2则显示“大于2”，下面举例说明。

.js文件中变量的定义示例

小白教程网www.2d5.net

data: {
    shuzi:5
  },

wxml文件代码示例

小白教程网www.2d5.net

<view wx:elif="{{shuzi<2}}"> 
  小于2  <!—shuzi这个变量的值为5，大于2，该内容不显示-->
</view>
<view wx:else> 
  大于2  <!—shuzi这个变量的值为5，大于2，该内容将显示-->
</view>

4.if语句的案例

.wxml文件代码示例

小白教程网www.2d5.net

<view wx:if="{{shuzi>2}}">
    <view>if条件为true则显示</view> <!—shuzi这个变量的值为2，不大于2，该内容不显示-->
</view>
 
<view wx:elif="{{shuzi<2}}">
  1   <!—shuzi这个变量的值为2，不大于2（因为等于2），该内容不显示-->
</view>
<view wx:else>
  2 <!—shuzi这个变量的值为2，等于2，该内容将显示-->
</view>
 
<block wx:if="{{true}}">  <!—条件为true，则包含的代码块内容都显示-->
  <view> view1 </view>
  <view> view2 </view>
</block>

.js代码示例

小白教程网www.2d5.net

data: {
    shuzi:2  <!—定义变量shuzi的值-->
},

效果如图9-8所示。