🎥 作者简介： CSDN\阿里云\腾讯云\华为云开发社区优质创作者，专注分享大数据、Python、数据库、人工智能等领域的优质内容
🌸个人主页： 长风清留杨的博客
🍃形式准则： 无论成就大小，都保持一颗谦逊的心，尊重他人，虚心学习。
✨推荐专栏： Python入门到入魔，Mysql入门到入魔，Python入门基础大全，Flink入门到实战
🍂若缘分至此，无法再续相逢，愿你朝朝暮暮，皆有安好，晨曦微露道早安，日中炽热说午安，星河长明寄晚安🍂
WXML 模板语法
条件渲染
在微信小程序开发中，WXML（WeiXin Markup Language）是类似HTML的标记语言，用于构建小程序的页面结构。条件渲染是WXML中一种常用的模板语法，用于根据条件动态地控制页面元素的显示与隐藏。
使用wx:if进行条件渲染
wx:if是WXML中用于条件渲染的指令。它可以根据一个布尔值条件来判断是否需要渲染某个元素。
语法
<view wx:if="{{condition == ?}}">内容</view>
其中{{condition}}是一个布尔值表达式，如果它的值为true，则<view>元素会被渲染到页面上；如果值为false，则<view>元素不会被渲染。
示例
index.wxml文件
<view wx:if="{{userLoggedIn}}">欢迎回来，用户！</view>
<view wx:if="{{!userLoggedIn}}">请登录</view>
对userLoggedIn进行表达式判断，如果为TRUE就进行渲染，可以看到两个表达式，第一个是判断userLoggedIn存在，如果存在就显示 欢迎回来，用户！，第二个是判断userLoggedIn不存在，如果不存在就显示 请登录
我们先不给userLoggedIn赋值，然后看看页面上是什么结果
可以看到，因为userLoggedIn不存在，所以渲染了第二个<view>元素
如果给userLoggedIn赋值之后看看会怎么样
index.js文件
Page({data: {userLoggedIn: 'hello world'}
})
我们给userLoggedIn进行了赋值，给了一个hello world值，现在userLoggedIn已经是存在的了，然后再去页面上看看结果
因为userLoggedIn已经存在了所以第一个<view>元素等于True
使用wx:elif和wx:else添加条件逻辑
除了wx:if之外，还可以使用wx:elif和wx:else来添加更多的条件逻辑，以便处理多个条件。
语法
<view wx:if="{{condition1}}">条件1内容</view>
<view wx:elif="{{condition2}}">条件2内容</view>
<view wx:else>其他内容</view>
在这个语法中，如果condition1为true，则渲染第一个<view>元素；如果condition1为false且condition2为true，则渲染第二个<view>元素；如果两者都为false，则渲染wx:else后面的<view>元素。
示例：
index.wxml文件
<view wx:if="{{type === 1}}">男</view>
<view wx:elif="{{type === 2}}">女</view>
<view wx:else>保密</view>
在xml文件中，我们进行了三个判断，第一个判断是如果type等于1就显示男，如果不满足这个条件的话就就下第二个wx:elif的判断，如果type等于2就显示女，如果wx:if和wx:elif中的条件都不满足的话就渲染wx:else，显示保密
那简单说一下if elif else 这三个的功能
if
if 是“如果”的意思，它用来检查一个条件是否为真（True）。如果条件为真，那么 if 语句下面的代码块就会被执行。如果条件为假（False），那么这个代码块就会被跳过。elif
elif 是“否则如果”的意思，它是 else if 的简写。elif 用来检查一个新的条件，但是只有在前面的 if 条件为假，并且当前的这个 elif 条件为真时，它下面的代码块才会被执行。你可以使用多个 elif 来检查多个条件。else
else 是“否则”的意思，它用来处理所有前面的 if 和 elif 条件都为假的情况。当程序运行到 else 时，不管前面的条件如何，只要它们都为假，else 下面的代码块就会被执行。
然后我们给type赋值来看看如何改变结果
index.js文件
Page({data: {type: 1}
})
上面我们给type赋值为1，那么页面上就会显示男，然后看看我们更改type的值之后是什么结果，在AppData中可以修改对应的值，大家注意看动图中的AppData中type值的变更，跟页面上渲染的结果
注意事项
- 使用wx:if时，需要确保条件表达式是一个布尔值。
- 当使用wx:if、wx:elif和wx:else时，它们必须包裹在同一个父元素内部（虽然图片中的示例并没有严格遵守这一点，但在实际开发中建议这样做）。
- 条件渲染会导致元素的创建和销毁，因此在需要频繁切换显示状态的场景下，可能会影响性能。对于这种情况，可以考虑使用hidden属性或class绑定来控制元素的显示与隐藏（这种方式不会销毁元素，只是改变其可见性）。
结合<block>使用wx:if
在微信小程序开发中，WXML（WeiXin Markup Language）是构建页面结构的标记语言。条件渲染是WXML中一种常用的模板语法，用于根据条件动态地控制页面元素的显示与隐藏。当需要一次性控制多个组件的展示与隐藏时，可以结合使用<block>标签和wx:if属性。
使用方法
- 包裹组件：
使用<block></block>标签将需要控制显示与隐藏的多个组件包裹起来。<block>并不是一个真正的组件，它只是一个包裹性质的容器，不会在页面中做任何渲染。 - 添加wx:if属性：
在<block>标签上添加wx:if属性，并为其指定一个布尔值表达式。这个表达式的值决定了<block>标签内的组件是否会被渲染到页面上。
示例
本案例将展示一个简单的条件渲染示例，其中包含一个布尔值变量isShowContent。当isShowContent为true时，将显示一段文本内容；当isShowContent为false时，则不显示任何内容。
index.wxml文件
<!-- index.wxml -->
<view class="container"><!-- 使用<block>结合wx:if进行条件渲染 --><block wx:if="{{isShowContent}}"><!-- 当isShowContent为true时，显示以下<view> --><view class="content"><text>这是一段根据条件显示的文本内容。</text></view></block><!-- 可以在这里添加其他不受条件渲染影响的组件 -->
</view>
<view class="container">：定义一个容器视图，用于包裹整个条件渲染的区域。<block wx:if="{{isShowContent}}">：使用<block>标签结合wx:if指令进行条件渲染。{{isShowContent}}是一个数据绑定表达式，它表示一个布尔值变量。<view class="content">：当isShowContent为true时，这个<view>会被渲染到页面上，并显示其中的文本内容。<text>：用于显示文本内容的组件。
index.js文件
// index.js
Page({data: {// 初始化isShowContent为true，可以根据需要更改为falseisShowContent: true},// 可以在这里添加其他页面逻辑，如事件处理函数等
})
结果：
hidden
在微信小程序开发中，WXML（WeiXin Markup Language）是用于构建页面结构的标记语言。条件渲染是WXML中的一个重要功能，它允许开发者根据条件动态地控制页面元素的显示与隐藏。除了之前提到的wx:if指令外，WXML还提供了hidden属性来实现条件渲染。
hidden属性的使用
hidden属性是一个布尔属性，当它的值为true时，对应的元素会被隐藏；当值为false时，元素则会被显示出来。与wx:if不同的是，hidden属性只是简单地控制元素的可见性，而不会销毁元素或重新创建元素。
<view hidden="{{ type === 1}}"> 条件成立则隐藏，条件不成立则显示</view>
案例
本案例将展示一个简单的条件渲染示例，其中包含一个布尔值变量condition。当condition为true时，将隐藏一个红色的<view>元素；当condition为false时，则显示该元素。同时，为了对比，还将展示一个始终可见的绿色<view>元素。
index.wxml文件
<!-- index.wxml -->
<view class="container"><!-- 红色的view元素，其显示与隐藏由condition控制 --><view class="red-view" hidden="{{condition}}"><!-- 当condition为true时，此view将被隐藏 --><text>这是一个红色的视图元素</text></view><!-- 绿色的view元素，始终可见，用于对比 --><view class="green-view"><text>这是一个绿色的视图元素（始终可见）</text></view><!-- 可以在这里添加一个按钮，用于切换condition的值 --><button bindtap="toggleCondition">切换红色视图显示</button>
</view>
<view class="container">：定义一个容器视图，用于包裹整个条件渲染的区域和一个按钮。<view class="red-view" hidden="{{condition}}">：定义一个红色的<view>元素，并使用hidden属性来控制其显示与隐藏。{{condition}}是一个数据绑定表达式，它表示一个布尔值变量。<text>：用于显示文本内容的组件。<view class="green-view">：定义一个绿色的<view>元素，用于与红色的<view>元素进行对比，并且它始终可见。<button bindtap="toggleCondition">：一个按钮，当用户点击它时，会触发toggleCondition事件处理函数。
index.wxss文件
CSS样式（为了更直观地展示效果，可以添加一些简单的样式）：
/* index.wxss */
.container {padding: 20px;
}.red-view {background-color: red;color: white;padding: 10px;margin-bottom: 10px;
}.green-view {background-color: green;color: white;padding: 10px;
}
index.js文件
// index.js
Page({data: {// 初始化condition为true，红色视图元素默认隐藏condition: true},// 切换condition的值toggleCondition: function() {this.setData({// 使用!操作符来切换布尔值condition: !this.data.condition});}
})
- data对象：定义了页面的初始数据，其中condition被初始化为true，表示红色视图元素默认隐藏。
- toggleCondition函数：是一个事件处理函数，当用户点击按钮时会被调用。它使用this.setData方法来更新condition的值，通过!操作符来切换布尔值。
结果：
wx:if 与 hidden 的对比
| 对比项 | wx:if | hidden |
|---|---|---|
| 运行方式 | 动态创建和移除元素 | 切换样式（display: none; 或 display: block;） |
| 性能影响 | 条件不满足时，不创建DOM节点，但切换时可能涉及DOM重构 | 始终存在于DOM中，只是切换显示状态，性能开销小但占用资源 |
| 适用场景 | 控制条件复杂或需要频繁切换显示/隐藏状态的多个元素时较优 | 控制条件简单，不需要频繁切换或元素数量较少时较优 |
| 代码示例 | <view wx:if="{{condition}}">内容</view> | <view hidden="{{!condition}}">内容</view> |
| 搭配使用 | 可与wx:elif、wx:else搭配，实现多条件逻辑判断 | 单独使用，不支持多条件逻辑的直接判断 |
| 使用建议 | 条件复杂或需要避免不必要的DOM节点创建时，优先使用wx:if | 频繁切换且条件简单，或元素较少时，hidden可能更高效 |
说明：
-
运行方式：
wx:if在条件不满足时不会创建DOM节点，而hidden则是通过切换元素的display样式来控制显示与隐藏。 -
性能影响：
wx:if在条件切换时可能涉及DOM重构，而hidden只是简单地切换显示状态，不涉及DOM节点的增删。但wx:if在条件不满足时不会占用DOM资源。 -
适用场景：根据性能需求和条件复杂度，选择合适的条件渲染方式。
-
代码示例：给出了
wx:if和hidden的基本用法。 -
搭配使用：
wx:if可以与其他条件判断指令搭配使用，实现更复杂的逻辑。 -
使用建议：根据具体场景和需求，选择最适合的条件渲染方式。