热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

微信小程序:渲染标签的使用

在微信小程序里面目前只有两种渲染标签:条件渲染和列表渲染。
在微信小程序里面目前只有两种渲染标签:条件渲染和列表渲染。
一.条件渲染
在框架中,我们用 wx:if="{{condition}}" 来判断是否需要渲染该代码块,因为 wx:if 是一个控制属性,需要将它添加到一个标签上,也就是view标签上。但是如果我们想一次性判断多个组件标签,我们可以使用一个 标签将多个组件包装起来,并在上边使用 wx:if 控制属性。下面我们就紧接着上节的课程案例来介绍。
.js

Page({
  data:{
    text:"这是www.html51.com的内容",
    btnText:"这是按钮的内容",
  },

.wxml




{{text}}

1).可以当if条件为true时,显示“这是www.html51.com的内容”,如下图所示:

3).当然,上述实例中的true和false也可以是数据绑定格式实现,所有当 wx:if 的条件值切换时,框架有一个局部渲染的过程,因为它会确保条件块在切换时销毁或重新渲染。代码和实现效果图如下:

  data:{
    text:"这是www.html51.com的内容",
    btnText:"这是按钮的内容",
    show :true,
  },
{{text}}

4).我们还可以做动态的条件渲染判断,点击鼠标时做条件渲染:

  data:{
    text:"这是www.html51.com的内容",
    btnText:"这是按钮的内容",
    show :true,
  },
  btnClick: function() {
      console.log("按钮被点击了了...")
      var isShow = this.data.show;

      console.log("isShow:" + isShow)
      this.setData({text:"这是新的51小程序内容"})
  }

编译可以看到:

5).我们还有做一个点击后“隐藏”--“显示”的循环动作。

  btnClick: function() {
      console.log("按钮被点击了了...")
      var isShow = this.data.show;

      console.log("isShow:" + isShow)
      this.setData({text:"这是新的51小程序内容",show:!isShow})
  }

其编译后的显示结果如下:

6)也可以用 wx:elif 和 wx:else 来添加一个 else 块,如下所示:




{{text}} 1
{{text}} 2

根据以上代码,当我们点击鼠标时,会循环显示1 2我们看一下结果:

列表渲染其实就是我们常说的for循环渲染啦,用过列表数据我们可以循环显示一堆新闻数据等,在组件上使用wx:for控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。


  {{index}}: {{item.message}}

1).我们来继续举例查看,在之前我们的.wxml文件中新增如下代码:


www.html51.com小程序教程循环播放...

编译后的结果如下图所示:

2).同样,列表渲染也可以用数据绑定。上述同样的效果,用数据绑定实现的代码如下:

  data:{
    text : "这是www.html51.com的内容",
    btnText : "这是按钮的内容",
    show : false,
    news : ['aaa','bbb','ccc'],
  },
51小程序demo

3)问题来了,我们如何才能显示数组里面的内容呢?默认数组的当前项的下标变量名默认为index,数组当前项的变量名默认为item。所以item可以显示数组里面的 内容了,我们来看一下:


{{item}}

编译后的显示结果如下所示:


{{index}} : {{item}}

4).如何动态的更新数组列表里面的值呢?举例:我们设置每次点击都会删除数组的第一个值用shift();

  btnClick: function() {
      console.log("按钮被点击了了...")
      var isShow = this.data.show;
      var newsData = this.data.news;
      newsData.shift();

      console.log("isShow:" + isShow)
      this.setData({text:"这是新的51小程序内容",show:!isShow,news:newsData})
  }

我们看一下演示效果:

1.在data中对show进行赋值时,不需要加双引号。

更多微信小程序:渲染标签的使用相关文章请关注PHP中文网!

推荐阅读
  • 手机上编写和运行PHP代码的最佳软件推荐 ... [详细]
  • 当前,众多初创企业对全栈工程师的需求日益增长,但市场中却存在大量所谓的“伪全栈工程师”,尤其是那些仅掌握了Node.js技能的前端开发人员。本文旨在深入探讨全栈工程师在现代技术生态中的真实角色与价值,澄清对这一角色的误解,并强调真正的全栈工程师应具备全面的技术栈和综合解决问题的能力。 ... [详细]
  • 本文详细介绍了如何在微信小程序中使用JavaScript实现图片上传至PHP服务器的方法。通过具体的代码示例,帮助开发者掌握从客户端选择图片、处理图片数据到服务器端接收并保存图片的完整流程。同时,文章还提供了常见问题的解决方案和优化建议,确保上传过程的高效性和稳定性。 ... [详细]
  • 深入解析Tomcat:开发者的实用指南
    深入解析Tomcat:开发者的实用指南 ... [详细]
  • 在Spring框架中,基于Schema的异常通知与环绕通知的实现方法具有重要的实践价值。首先,对于异常通知,需要创建一个实现ThrowsAdvice接口的通知类。尽管ThrowsAdvice接口本身不包含任何方法,但开发者需自定义方法来处理异常情况。此外,环绕通知则通过实现MethodInterceptor接口来实现,允许在方法调用前后执行特定逻辑,从而增强功能或进行必要的控制。这两种通知机制的结合使用,能够有效提升应用程序的健壮性和灵活性。 ... [详细]
  • SQLmap自动化注入工具命令详解(第28-29天 实战演练)
    SQL注入工具如SQLMap等在网络安全测试中广泛应用。SQLMap是一款开源的自动化SQL注入工具,支持12种不同的数据库,具体支持的数据库类型可在其插件目录中查看。作为当前最强大的注入工具之一,SQLMap在实际应用中具有极高的效率和准确性。 ... [详细]
  • 如何利用Apache与Nginx高效实现动静态内容分离
    如何利用Apache与Nginx高效实现动静态内容分离 ... [详细]
  • 深入解析 Spring MVC 的核心原理与应用实践
    本文将详细探讨Spring MVC的核心原理及其实际应用,首先从配置web.xml文件入手,解析其在初始化过程中的关键作用,接着深入分析请求处理流程,包括控制器、视图解析器等组件的工作机制,并结合具体案例,展示如何高效利用Spring MVC进行开发,为读者提供全面的技术指导。 ... [详细]
  • PyQt5 QTextEdit:深入解析Python中多功能GUI库的应用与实现
    本文详细探讨了 PyQt5 中 QTextEdit 组件在 Python 多功能 GUI 库中的应用与实现。PyQt5 是 Qt 框架的 Python 绑定,提供了超过 620 个类和 6000 个函数及方法,广泛应用于跨平台应用程序开发。QTextEdit 作为其中的重要组件,支持丰富的文本编辑功能,如富文本格式、文本高亮和自定义样式等。PyQt5 的流行性不仅在于其强大的功能,还在于其易用性和灵活性,使其成为开发复杂用户界面的理想选择。 ... [详细]
  • 本课程详细解析了Spring AOP的核心概念及其增强机制,涵盖前置增强、后置增强和环绕增强等类型。通过具体示例,深入探讨了如何在实际开发中有效运用这些增强技术,以提升代码的模块化和可维护性。此外,还介绍了Spring AOP在异常处理和性能监控等场景中的应用,帮助开发者更好地理解和掌握这一强大工具。 ... [详细]
  • 在本文中,我们将探讨如何使用 UniApp 封装小程序 API 请求接口的最佳实践。通过创建 `request.js` 文件,定义基础 URL 并传入后端提供的 URL 作为请求参数。同时,配置请求方法(如 GET、POST)和请求头(例如包含 token 的认证信息),以实现高效、安全的 API 调用。此外,我们还将介绍如何处理请求和响应的错误,以及如何优化请求性能,确保应用在不同平台上的兼容性和稳定性。 ... [详细]
  • 【Python爬虫实操】 不创作小说,专精网站内容迁移,超高效!(含源代码)
    本文详细介绍了如何利用Python爬虫技术实现高效网站内容迁移,涵盖前端、后端及Android相关知识点。通过具体实例和源代码,展示了如何精准抓取并迁移网站内容,适合对Python爬虫实战感兴趣的开发者参考。 ... [详细]
  • HTML5大文件传输技术深度解析与实践分享
    本文深入探讨了HTML5在Web前端开发中实现大文件上传的技术细节与实践方法。通过实例分析,详细讲解了如何利用HTML5的相关特性高效、稳定地处理大文件传输问题,并提供了可供参考的代码示例和解决方案。此外,文章还讨论了常见的技术挑战及优化策略,旨在帮助开发者更好地理解和应用HTML5大文件上传技术。 ... [详细]
  • 如何构建并优化微信小程序页面的设计与功能
    本文将深入探讨微信小程序页面的设计与优化方法,旨在帮助开发者高效构建功能完备且用户体验良好的小程序。通过实例分析与技术详解,读者能够掌握从页面布局到功能实现的全过程,提升开发技能与应用质量。 ... [详细]
  • 对于内存仅为512MB、硬盘80GB的老旧设备,部署Ubuntu Server毫无压力。然而,许多平台仅支持CentOS系统,而CentOS默认要求1GB以上内存才能使用图形界面安装。实际上,安装完成后,即使内存低至256MB也能正常运行。此外,通过优化系统配置和减少不必要的服务,可以进一步提升系统性能,确保在资源受限的环境中稳定运行。 ... [详细]
author-avatar
bunnyvivi
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有