WXML模板语法-条件渲染_wxml if else

WXML模板语法-条件渲染

1.wx:if

在校程序中，使用==wx:if=“{{condition}}”==来判断是否需要渲染该代码块：

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

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

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

2.结合block使用wx:if

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

<block wx:if={{true}}>
	<view> view1 </view>
	<view> view2 </view>
</block>
1
2
3
4

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

3.hideen

在小程序中，直接使用==hidden=“{{condition}}”==也能控制元素的显示与隐藏：

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

4.wx:if与hidden的对比

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

WXML模板语法 - 列表渲染

1.wx:for

通过wx:for可以根据指定的数组，循环渲染重的组件结构，语法示例如下：

<view wx:for="{{array}}">
	索引是：{{index}} 当前项是：{{item}}
</view>
1
2
3

2.手动指定索引和当前项的变量名*

• 使用wx:for-index可以指定当前循环项的索引的变量名
• 使用wx:for-item可以指定当前项的变量名

示例代码如下：

<view wx:for="{{arry}}" wx:for-item="idx" wx:for-item="itemName">
	索引是：{{idx}} 当前项是：{{itemName}}
</view>
1
2
3

3.wx:key的使用

类似于Vue列表循环渲染中的==:key==，小程序在实现列表渲染时，也建议渲染出来的列表项指定唯一的key值，从而提高渲染的效率，示例代码如下：

<view wx:for="{{userList}}" wx:key="id">{{item.name}}</view>
1