微信小程序教程之条件渲染

条件渲染

所谓条件渲染，是指数据绑定表达式的逻辑值来判断是否渲染当前组件。在下面一段代码中，有一段使用hidden属性的代码：

<view class=&#39;content&#39; hidden=&#39;{{flag ? true: false}}&#39;>
    <text>{{hiddencontent}}</text>
 </view>

在上面的条码中，当flag变量的值为true时，view组件及包含的组件将不会渲染，当flag变量的值为false时，将view组件输出渲染到页面。

wx:if 条件渲染

在微信小程序wxml文件中，提供了另一种方式进行类似的条件渲染，就是使用wx:if这个属性来控制当前的组件，代码如下：

<view wx:if= &#39;{{condition}}&#39;>内容</view>

在上面的代码中，当condition变量的值为true时，view组件将渲染输出，当condition的变量为false时，view组件将不会渲染。

在我们看来，wx:if 属性和组件的hidden类似，不同的是，控制是否渲染的逻辑变量是相反的，不过使用wx:if可以更方便的控制，可以wx:if ,wx:else 来添加多个分支代码块，控制表达式的值为true渲染一个分支，为false则渲染另一个分支，请看代码：

<view wx:if= &#39;{{length > 3}}&#39;>内容1</view>
<view wx:elif= &#39;{{length < 5}}&#39;>内容2</view>
<view wx:else&#39;>内容3</view>

在上面的代码中，当length 大于3是渲染内容1，当length的值大于3且小于5时，界面渲染输出内容2，如果以上条件都不满足则渲染输出内容3。

聪明靠努力学习,学识靠平时积累

以上是微信小程序教程之条件渲染的详细内容。更多信息请关注PHP中文网其他相关文章！