[WeChat applet] WXML template syntax - conditional rendering

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

如果要Control the show and hide of multiple components at once,可以使用 < block >
< /block >标签Wrap up multiple components：

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

注意：< block >并不是一个组件,he is just a container,Does not do any rendering on the page.

hidden

在小程序中,直接使用hidden="{ {condition}}"Show and hide elements can also be controlled

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

wx:if与hidden的区别

1. 运行方式不同

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

2. 使用建议：

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