WXML 模板语法③条件渲染-微信小程序开发(九)

条件渲染

1. wx:if

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

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

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

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

2. 结合 使用 wx:if

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

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

注意: 并不是一个组件,它只是一个包裹性质的容器,不会在页面中做任何渲染。

3. hidden

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

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

4. wx:if 与 hidden 的对比

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

posted @ 2022-08-11 14:50  清和时光  阅读(110)  评论(0编辑  收藏  举报