(精华)2020年7月15日 微信小程序 wx:if的使用

176 阅读1分钟
<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
  }
})

wx:if vs hidden

wx:if 也是惰性的,如果在初始渲染条件为 false,框架什么也不做,在条件第一次变成真的时候才开始局部渲染
hidden 就简单的多,组件始终会被渲染,只是简单的控制显示与隐藏
性能分析:wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此,如果需要频繁切换的情景下,用 hidden 更好,如果在运行时条件不大可能改变则 wx:if 较好