【微信小程序】WXML模板语法-条件渲染

wx:if

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

<view wx:if="{
    {condiion}}"> true </view>

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

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

并在,js文件中定义type的值

data: {
    
	type: 1
},

结合 < block > 包装 wx::if

如果要一次性控制多个组件的展示和隐藏，可以使用 < block >
< /block >标签将多个组件包装起来：

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

注意：< block >并不是一个组件，他只是一个容器，不会在页面种做任何渲染。

hidden

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

<view hidden="{
    { condition }}">条件为true隐藏,条件为false显示</view>>
//condition需要在.js文件的data中定义

wx:if与hidden的区别

1. 运行方式不同

• wx:if以动态创建和移除元素的方式
• hidden以切换样式的方式

2. 使用建议：

• 频繁切换时，建议使用hidden
• 控制条件复杂，建议使用wx:if