【微信小程序】-- WXML 模板语法 - 条件渲染 -- wx:if & hidden (十一)

这篇具有很好参考价值的文章主要介绍了【微信小程序】-- WXML 模板语法 - 条件渲染 -- wx:if & hidden (十一)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

微信小程序wx:if,微信小程序开发教程,# 基础篇,微信小程序,小程序,javascript

  • 💌 所属专栏:【微信小程序开发教程】

  • 😀 作  者:我是夜阑的狗🐶

  • 🚀 个人简介:一个正在努力学技术的CV工程师,专注基础和实战分享 ,欢迎咨询!

  • 💖 欢迎大家:这里是CSDN,我总结知识的地方,喜欢的话请三连,有问题请私信 😘 😘 😘


前言

  大家好,又见面了,我是夜阑的狗🐶,本文是专栏【微信小程序开发教程】专栏的第11篇文章;
  今天开始学习微信小程序的第七天💖💖💖,开启新的征程,记录最美好的时刻🎉,每天进步一点点。
  专栏地址:【微信小程序开发教程】, 此专栏是我是夜阑的狗微信小程序开发过程的总结,希望能够加深自己的印象,以及帮助到其他的小伙伴😉😉。
  如果文章有什么需要改进的地方还请大佬不吝赐教👏👏。


一、条件渲染

  前面已经介绍完了WXML模板语法–事件绑定,通过栗子学习到了如何在WXML页面上进行事件绑定。接下来就来讲解一下另外一个模板语法–条件渲染。话不多说,让我们原文再续,书接上回吧。

微信小程序wx:if,微信小程序开发教程,# 基础篇,微信小程序,小程序,javascript

1、wx:if

  在小程序中,使用 wx:if="{{condition}}" 来判断是否需要渲染该代码块,如果里面的 conditiontrue的时候就会显示 view 组件,反之则不显示,示例代码如下所示:

<view wx:if="{{condition}}"> 我是夜阑的狗 </view>

  这里看到 if 语句肯定会联想到 elseelif,同样这里也是有 wx:elsewx:elif ,可以用来添加 else 判断:

<view wx:if="{{type === 1}}"> 夜兰 </view>
<view wx:elif="{{type === 2}}"> 高启强 </view>
<view wx:else> 老默不想吃鱼 </view>

   当改变type属性时,页面显示的文本也是随着改变。可以来看一下实际效果:
微信小程序wx:if,微信小程序开发教程,# 基础篇,微信小程序,小程序,javascript

2、 <block> 使用 wx:if

  如果想要控制多个组件一起展示和隐藏的话,就可以使用一个 <block></block> 标签将多个组件包装起来,并在
标签上使用 wx:if 控制属性,具体代码如下:

Page({
  /**
   * 页面的初始数据
   */
  data: {
    // 字符串类型的数据
    info: 'Nice 十连双黄',
  },
})

  注意: 并不是一个组件,它只是一个包裹性质的容器,不会在页面中做任何渲染,所以只会显示该组件内部的组件。

微信小程序wx:if,微信小程序开发教程,# 基础篇,微信小程序,小程序,javascript

  看到这里,估计有疑惑了,好像这种操作在两个 view 组件外面再加一个 view + wx:if 不也是可行的吗?确实是可行,但是实际运行过程中,最外部的 view 组件也会被一起渲染出来,而使用 组件不会被渲染,只起到一个包裹的作用,所以使用 组件可以避免渲染不必要的元素,以此来提高页面渲染性能。

3、hidden

  在小程序中,除了使用 wx:if 来控制元素的显示与隐藏外,还可以直接使用 hidden="{{ condition }}" 完成此操作。

cshPageTab.js:

Page({
  /**
   * 页面的初始数据
   */
  data: {
	flag: true,
  },

})

cshPageTab.wxml:

<block wx:if="{{true}}">
  <view hidden="{{flag}}">狂飙</view>
  <view>我也要去卖鱼了</view>
</block>

   当条件为 true 时隐藏元素,条件为 false 时则显示,来看一下实际效果:

微信小程序wx:if,微信小程序开发教程,# 基础篇,微信小程序,小程序,javascript

4、wx:if 与 hidden 的区别

   前面介绍了 wx:if 和 hidden 这两种隐藏显示元素的方法,虽然这种方法实现功能是相似的,但本质上还是有区别的,如下表格所示:

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

  因为 wx:if 之中的模板也可能包含数据绑定,所以当 wx:if 的条件值切换时,框架有一个局部渲染的过程,因为它会确保条件块在切换时销毁或重新渲染。
  同时 wx:if 也是惰性的,如果在初始渲染条件为 false,框架什么也不做,在条件第一次变成真的时候才开始局部渲染。相比之下,hidden 就简单的多,组件始终会被渲染,只是简单的控制显示与隐藏。
  这里通过下面的栗子来学习一下两者的不同,具体代码如下:
cshPageTab.wxml:

<block wx:if="{{true}}">
  <view hidden="{{flag}}">狂飙</view>
  <view>我也要去卖鱼了</view>
</block>

  这两者的运行原理是不同的,想要一起显示出来 hidden 属性 flag 就要取反置为 false才可以显示,实现效果如下所示:

微信小程序wx:if,微信小程序开发教程,# 基础篇,微信小程序,小程序,javascript

  一般来说,wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此,如果需要频繁切换的情景下,用 hidden 更好,如果在运行时条件不大可能改变则 wx:if 较好。


总结

  感谢观看,这里就是WXML 模板语法 - 条件渲染 – wx:if & hidden的介绍使用,如果觉得有帮助,请给文章点个赞吧,让更多的人看到。🌹 🌹 🌹

微信小程序wx:if,微信小程序开发教程,# 基础篇,微信小程序,小程序,javascript
  也欢迎你,关注我。👍 👍 👍

  原创不易,还希望各位大佬支持一下,你们的点赞、收藏和留言对我真的很重要!!!💕 💕 💕 最后,本文仍有许多不足之处,欢迎各位认真读完文章的小伙伴们随时私信交流、批评指正!下期再见。🎉

更多专栏订阅:

  • 😀 【LeetCode题解(持续更新中)】
  • 🚝 【Java Web项目构建过程】
  • 💛 【微信小程序开发教程】
  • 【JavaScript随手笔记】
  • 🤩 【大数据学习笔记(华为云)】
  • 🦄 【程序错误解决方法(建议收藏)】
  • 🚀 【软件安装教程】



订阅更多,你们将会看到更多的优质内容!!文章来源地址https://www.toymoban.com/news/detail-752311.html

到了这里,关于【微信小程序】-- WXML 模板语法 - 条件渲染 -- wx:if & hidden (十一)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序wxml的数据和事件的绑定,以及条件和列表的渲染

    关于微信小程序知识点一共做了六个博客,涵盖大部分内容,有想学习的可以按照以下顺序查看 1.微信小程序的启动和渲染过程(加组件分类和组件的基本使用以及API分类) 2.微信小程序wxml的数据和事件的绑定,以及条件和列表的渲染 3.微信小程序wxss相关介绍、全局配置和tabbar知识

    2024年02月10日
    浏览(58)
  • 【微信小程序】-- WXML 模板语法 - 事件绑定 -- tap & input (十)

    💌 所属专栏:【微信小程序开发教程】 😀 作  者:我是夜阑的狗🐶 🚀 个人简介:一个正在努力学技术的CV工程师,专注基础和实战分享 ,欢迎咨询! 💖 欢迎大家:这里是CSDN,我总结知识的地方,喜欢的话请三连,有问题请私信 😘 😘 😘   大家好,又见面了,

    2024年02月01日
    浏览(35)
  • 【微信小程序】一文搞懂条件渲染、列表渲染以及wxss模板样式

    🐚作者简介:苏凉(专注于网络爬虫,数据分析,正在学习前端的路上) 🐳博客主页:苏凉.py的博客 🌐系列专栏:小程序开发基础教程 👑名言警句:海阔凭鱼跃,天高任鸟飞。 📰要是觉得博主文章写的不错的话,还望大家三连支持一下呀!!! 👉关注✨点赞👍收藏📂

    2024年01月16日
    浏览(67)
  • 微信小程序中的条件渲染和列表渲染,wx:if ,wx:elif,wx:else,wx:for,wx:key的使用,以及block标记和hidden属性的说明

    1.1. 语法格式 (wx:if, wx:elif ,wx:else) 当condition条件为true时,代码块渲染显示,为false时,代码块不进行渲染. 可以结合 wx:elif=“{{condition}}” 和 wx:else来进行判断 1.2. block标记 可以使用block标记,一次性的控制多个组件的显示与隐藏,block标记本身并不进行渲染。 block并不是一个组

    2024年02月16日
    浏览(45)
  • 【微信小程序】wxml模板的使用

    目录 一,wxml模板 1.什么是 WXML 2. 什么是 WXSS 3.WXSS 和 CSS 的区别 4 .JS 逻辑交互 二,小程序的宿主环境 1.宿主环境简介 1.什么是宿主环境 2. 小程序的宿主环境 3.宿主环境包含内容 2 通信模型

    2024年02月04日
    浏览(49)
  • 微信小程序中WXML模版语法-数据绑定方法介绍

    1.数据绑定的基本原则 1在data中定义数据 2在WXML中使用数据 2.在data中定义页面的数据 在页面对应的.js文件中,把数据定义到data对象中即可: 3.Mustache语法的格式 把data中的数据绑定到页面中渲染,使用Mustache语法(双大括号)将变量包起来即可。语法格式为: 4.Mustache语法的应

    2024年02月12日
    浏览(48)
  • 【微信小程序】列表渲染wx:for

    🏆今日学习目标:第十二期——列表渲染wx:for 😃创作者:颜颜yan_ ✨个人主页:颜颜yan_的个人主页 ⏰预计时间:20分钟 🎉专栏系列:我的第一个微信小程序 哈喽大家好,本期是微信小程序专栏第十二期,本期我们将学习列表渲染wx:for。 注意:每期内容是连载呢,建议大家

    2024年02月08日
    浏览(50)
  • 如何为微信小程序添加WXML模板和自定义组件

    微信小程序是一种基于微信平台的应用开发框架,开发者可以使用小程序框架提供的组件、API和开发工具,快速开发出符合微信用户体验的小程序。 在小程序中,WXML(WeiXin Markup Language)是一种类似HTML的标记语言,用于描述小程序的结构。WXML的语法和HTML非常相似,但是有一

    2024年03月19日
    浏览(50)
  • towxml的使用,在微信小程序中快速将markdown格式渲染为wxml文本

    towxml3.0 支持以下功能: ● echarts图表,默认禁用,需自行构建以开启此功能 ● LaTeX数学公式,默认禁用,需搭建解析服务并自行构建以开启此功能 ● yuml图表,默认禁用,需要搭建解析服务并自行构建以开启此功能 ● highlight代码高亮,默认开启(默认仅开启bash、javascript、

    2024年04月26日
    浏览(32)
  • 微信小程序的条件判断wx:if、wx:elif以及for循环wx:for

    微信小程序中的条件判断与vue的v-if、v-else语法相似,其语法格式为: 直接实战: 官方文档是这么定义的: **重点1:默认数组当前项的变量名为:item;默认数组当前项的下标变量名为index; **重点2:如果不想使用默认的名:按照以下操作自定义变量名 本人习惯使用默认,实

    2024年02月14日
    浏览(42)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包