零基础微信小程序开发——WXML 模板语法之条件渲染（保姆级教程+超详细）

🕗 发布于 2024-12-11 06:07 微信小程序 小程序 javascript android ios

在这里插入图片描述

🎥 作者简介： 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，可以根据需要更改为false
    isShowContent: 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可以与其他条件判断指令搭配使用，实现更复杂的逻辑。
使用建议：根据具体场景和需求，选择最适合的条件渲染方式。

原文地址：https://blog.csdn.net/qq_51431069/article/details/144368715

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：运维实战：K8s 上的 Doris 高可用集群最佳实践
下一篇：微前端框架micro-app中的数据通信机制

.NET(C#) 如何配置用户首选项及保存用户设置
.NET(C#) 如何配置用户首选项及保存用户设置
阅读更多2024-12-14
【最新】北大数字普惠金融指数数据集-省市县（2011-2023年）
郭峰,王靖一,王芳,孔涛,张勋,程志云.测度中国数字普惠金融发展:指数编制与空间特征[J].经济学(季刊),2020,19(04):1401-1418.时间跨度：省级和城市级指数时间跨度为2011-2
阅读更多2024-12-14
GESP202412 四级【Recamán】题解（AC）
a11ak−1−kkakak−1−kak−1k小杨想知道 Recamán 数列的前n项从小到大排序后的结果。手动计算非常困难，小杨希望你能帮他解决这个问题。
阅读更多2024-12-14
IDEA遇到EasyConnect中的网络资源无法访问的问题
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。原文链接：https://blog.csdn.net/wanshanyu_/article/de
阅读更多2024-12-14
双目摄像头标定方法
此时已经完成标定，左下角为反投影误差，右边为外参可视化。将双目左右目拍的图像上传（左右目最好不少于20张）此时回到主页面，即可看到成功导出。把这些误差大的删除即可。
阅读更多2024-12-14
Servlet、omcat服务器架构与工作原理
Servlet是运行在服务器端的Java程序，它的主要职责之一是接收并处理来自客户端（如浏览器）的HTTP请求。当客户端发送一个请求到服务器时，Servlet可以解析请求中的信息，例如请求的URL路径
阅读更多2024-12-14
Vue生命周期钩子函数：深入解析与实践
作为高级Vue前端开发人员，对Vue组件的生命周期钩子函数有着深刻的理解是至关重要的。生命周期钩子函数是指在Vue组件的创建、更新、销毁等过程中，Vue自动调用的一系列方法。通过这些钩子函数，我们可以
阅读更多2024-12-14
安卓开发--使用android studio发布APP
app发布
阅读更多2024-12-14
数据结构与算法学习笔记----拓扑排序
@ author: 明月清了个风。
阅读更多2024-12-14
python 将数据保存到现有的Excel文件的新工作表
out_file = ‘query.xlsx’df1 = pd.DataFrame(out_data)若直接写入：df1.to_excel(out_file, index=False, sheet_n
阅读更多2024-12-14

零基础微信小程序开发——WXML 模板语法之条件渲染（保姆级教程+超详细）

WXML 模板语法

条件渲染

使用wx:if进行条件渲染

语法

示例

使用wx:elif和wx:else添加条件逻辑

语法

示例：

注意事项

结合<block>使用wx:if

使用方法

示例

hidden

hidden属性的使用

案例

wx:if 与 hidden 的对比

相关文章

结合`<block>`使用wx:if