小程序条件渲染wx:if

使用wx:if做条件渲染

当满条件时, 该元素生成, 不满足条件, 则该元素不生成

如下根据flag的值来确定些view元素要不要生成

<view>
  <view wx:if='{{flag}}' style='color:red'>强烈推荐</view>  
</view>

使用hidden属性也可以达到相同的效果

每一个元素都有hidden这个属性, 当hidden的值为真时, 则隐藏掉, 为假则显示

<view>
  <view hidden='{{!flag}}'style='color:red'>强烈推荐</view>
</view>

使用hidden和使用wx:if当然也是有区别的

hidden只是一个属性, 控制其所在元素的显示与不显示

所以无论hidden的值为真还是为假, hidden所在的元素都会生成

而wx:if可以让其所在元素生成或不生成(生成了就显示, 没有生成则不显示)

所以这两者是有本质的区别

使用场景:

如果后台的flag数据频繁变动, 则使用hidden属性, 因为它只需要显示或不显示, 而使用wx:if则是频繁地生成或取消

如果后台的flag数据不是频繁变动, 则使用wx:if, 因为当为假的时候可以减少一个元素的生成