1、wx:if
(1)在微信小程序中,使用wx:if="{{condition}}"
来判断是否需要渲染该代码块:
<view wx:if="{{condition}}"> luca </view>
(2)在微信小程序中,还可以用wx:elif
和wx:else
来添加else
判断,示例代码如下:
<view wx:if="{{type == 0}}"> 大 </view><view wx:elif="{{type == 1}}"> 中 </view><view wx:else> 小 </view>
2、结合 使用 wx:if
(1)如果要一次性控制多个组件的展示与隐藏
,可以使用一个<block></block>
标签将多个组件包装起来,并在 标签上使用wx:if
控制属性,示例代码如下:
<block wx:if="{{condition}}"><view> luca </view><view> hello </view></block>
(2)注意
:<block> 并不是一个组件
,它只是一个包裹性质的容器,不会在页面中做任何渲染。
3、hidden
(1)在微信小程序中,可以直接使用hidden="{{ condition }}"
也能控制元素的显示与隐藏,示例代码如下:
<view hidden="{{condition}}"> luca </view>
4、wx:if 与 hidden 的对比
(1)运行方式不同
①wx:if
以动态创建和移除元素的方式,控制元素的展示与隐藏。②hidden
以切换样式的方式(display: none/block;),控制元素的显示与隐藏。
(2)使用建议
①频繁切换时
,建议使用hidden
。②控制条件复杂时
,建议使用wx:if 搭配 wx:elif、wx:else
进行展示与隐藏的切换。