微信小程序学习笔记-条件渲染

169 阅读1分钟

1.wx:if

在小程序中,使用wx:if="{{condition}}"来判断是否需要渲染该代码块:

<view wx:if="{{condition}}">True</view>

也可以用wx:elifwx:else来添加else判断:

<view wx:if="{{type === 1}}">男</view>
<view wx:elif="{{type === 2}}">女</view>
<view wx:else>保密</view>

2.结合<block>使用wx:if

如果要一次性控制多个组件的展示与隐藏,可以使用一个标签将多个组件包装起来,并在<blcok>标签上使用wx:if控制属性,示例如下:

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

注意:<block>并不是一个组件,它只是一个包裹性质的容器,不会在页面中做任何渲染;以上代码使用<view>也可以实现同样效果,但是会将外层<view>组件也渲染出来

3.hidden

在小程序中,直接使用hidden="{{condition}}"也能控制元素的显示与隐藏:

<view hidden="{{condition}}">条件为true隐藏,条件为false显示</view>

4.wx:if与hidden的对比

  1. 运行方式不同
  • wx:if 以动态创建和移除元素的方式,控制元素的展示与隐藏
  • hidden以切换样式的方式(display:none/block),控制元素的显示与隐藏
  1. 使用建议
  • 频繁切换时,建议使用hidden
  • 控制条件复杂时,建议使用wx:if搭配wx:elif、wx:else进行展示与隐藏的切换