微信小程序 wx:if 指令使用与性能分析

前言

在微信小程序中，包含了很多指令，有 wx:for、wx:if 等。其中，wx:if 是用来判断某个条件是否成立，如果返回值为 true，则渲染这个元素，否则不渲染；还可以使用 wx:if 显示或隐藏一个元素。

一、wx:if

在框架中，使用 wx:if="" 来判断是否需要渲染该代码块，也可以用 wx:elif 和 wx:else 来添加一个 else 块。

<view wx:if="{{length > 5}}">1</view>
<view wx:elif="{{length > 2}}">2</view>
<view wx:else>3</view>
<block wx:if="{{true}}">
  <view>view1</view>
  <view>view2</view>
</block>

Page({
  data: {
    length: 4
  }
})

二、block wx:if

因为 wx:if 是一个控制属性，需要将它添加到一个标签上。如果要一次性判断多个组件标签，可以使用一个 block 标签将多个组件包装起来，并在上面使用 wx:if 控制属性。

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