位置:电子教程 > 微信小程序入门教程 (如果看不到内容请使用360浏览器) 推荐学习资源
小程序起步
小程序基础知识
小程序基础语法
当前阅读教程:微信小程序入门教程 > if 语句
阅读(22555525)      收藏       赞(5685)      分享
上一篇: 逻辑语句 下一篇: for语句

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所示

image.png



上一篇: 逻辑语句 下一篇: for语句
毕业设计网             广告联系QQ:45157718(微信同号)