【微信小程序】模板语法

news2025/3/1 13:28:49

数据绑定

对应页面的 js 文件中 定义数据到 data 中:

image.png

在页面中使用 {{}} 语法直接使用:

file_1717586136759_809.png

image.png

image.png

事件绑定

事件触发

常用事件:

image.png

事件对象的属性列表(事件回调触发,会收到一个事件对象 event,它的详细属性如下):

image.png

e.detail.value 是变化过后,文本框最新的值。

target是触发该事件的源头组件,而currentTarget则是当前事件所绑定的组件。

image.png

点击内部的按钮时,点击事件以冒泡的方式向外扩散,也会触发外层view的tap事件处理函数。

此时,对于外层的view来说:

  • e.target 指向的是触发事件的源头组件,因此,e.target 是内部的按钮组件
  • e.currentTarget 指向的是当前正在触发事件的那个组件,因此,e.currentTarget 是当前的view组件

小程序中的事件传参比较特殊,不能在绑定事件的同时为事件处理函数传递参数。小程序会将 bandtap 的属性值统一当做事件名称来处理。

可以为组件提供 data-* 自定义属性传参, * 代表参数的名字:

image.png

这里所传参数为 info=2

image.png

数据修改

image.png

这里举一个例子,实现文本框和 data 之间的数据同步:

image.png

image.png

image.png

条件渲染

wx:if

image.png

结合 <block> 使用 wx:if

如果要一次性控制多个组件的展示与隐藏,可以使用一个<block></block>标签将多个组件包装起来,并
<block>标签上使用wx:if控制属性,示例如下:

image.png

block 不是一个组件,只是一个包裹性的容器,不会在页面中做任何渲染。

hidden

控制显示与异常。

image.png

wx:if 与 hidden 对比:

image.png

列表渲染

wx:for

image.png

默认情况下,当前循环项的索引用 index 表示,当前循环项用 item 表示。

image.png

image.png

image.png

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1790944.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

28 hive安装-本地模式

1.安装mysql&#xff08;参考文章&#xff1a;centos7.8安装Mysql8.4-CSDN博客&#xff09; 2.将mysql驱动拷贝到/opt/module/hive/lib目录下 &#xff08;直接windows通过finalShell上传&#xff09; 3./opt/module/hive/conf目录下新建hive-site.xml文件&#xff0c;进行配置…

InvokeAI 最新版安装指南

由于stable diffusion webui不太好安装&#xff0c;或者你使用一些SD整合包&#xff0c;可免除复杂安装&#xff0c;但你认为SD的操作界面太复杂&#xff0c;所以今天介绍一款支持新手一键安装的Stable Diffusion工具包InvokeAI。 1.什么是InvokeAI InvokeAI 是一个创新的开源…

点量3D实时云渲染平台:三步轻松实现云流化

3D实时云渲染技术通过在云端执行3D渲染任务&#xff0c;并将渲染结果实时传送到用户端&#xff0c;它不仅降低了用户的硬件要求&#xff0c;还提高了数据处理的安全性和效率&#xff0c;为用户提供了高效的体验。 可以通过下载“点量云流服务单机版”进行低延时、高画质、沉浸…

vivado BEL

描述 通常&#xff0c;BEL或基本元素对应于设计的网表视图中的叶单元。 BEL是目标Xilinx FPGA上的设备对象&#xff0c;用于放置或映射基本网表 触发器、LUT和进位逻辑等对象。 BEL在SITE对象&#xff08;如SLICE和IO块&#xff09;中的设备上分组在一起 &#xff08;IOB&#…

kafka-消费者服务搭建配置简单消费(SpringBoot整合Kafka)

文章目录 1、使用efak 创建 主题 my_topic1 并建立6个分区并给每个分区建立3个副本2、创建生产者发送消息3、application.yml配置4、创建消费者监听器5、创建SpringBoot启动类6、屏蔽 kafka debug 日志 logback.xml7、引入spring-kafka依赖 1、使用efak 创建 主题 my_topic1 并…

VS2022,lib调用dll工程的一个函数

lib工程本身是一个静态库工程&#xff0c;没有链接器设置。然而&#xff0c;我们依然可以在lib工程中调用DLL工程中的函数&#xff0c;只需要确保头文件正确导入&#xff0c;并在最终使用lib的可执行文件项目中正确链接DLL的.lib文件。下面是一个详细的步骤说明&#xff1a; 假…

做自媒体素材哪里找?做自媒体必备的几个高质量素材网站分享

在自媒体的世界里&#xff0c;内容是王道。无论是视频还是文章&#xff0c;优秀的自媒体作品都需要有力的内容和高质量的素材作支撑。今天&#xff0c;我为大家整理了一些优质的素材网站&#xff0c;帮助每一位自媒体创作者&#xff0c;无论新手还是老手&#xff0c;都能找到适…

Vuforia AR篇(七)— 二维码识别

目录 前言一、什么是Barcode &#xff1f;二、使用步骤三、点击二维码显示信息四、效果 前言 在数字化时代&#xff0c;条形码和二维码已成为连接现实世界与数字信息的重要桥梁。Vuforia作为领先的AR开发平台&#xff0c;提供了Barcode Scanner功能&#xff0c;使得在Unity中实…

正则表达式运用

已经写了表达式&#xff0c;下一步就是匹配字符串得到结果 使用matcher的源码&#xff08;匹配&#xff09;普通方法&#xff0c;find&#xff08;寻找&#xff09;合适的代码&#xff0c;看字符串是否匹配成功 是否可以匹配上 匹配么&#xff0c;匹配就留下&#xff0c;fin…

DBeaver连接Elasticsearch

一、下载DBeaver 二、连接&#xff1a; 1、一定要选择开源的 Open Distro Elasticsearch 2、填写地址&#xff1a; 3、选择“URL”&#xff0c;将https改为http 否则会报SSL错误 4、测试连接

python学习笔记-05

函数 基本上所有的高级语言都支持函数&#xff0c;函数就是一种代码抽象的方式。之前所使用的len、print等都是python的内置函数。 1.初识函数 在编写程序过程中&#xff0c;如果一段代码经常出现&#xff0c;为了提高编写效率&#xff0c;将这类实现某个功能的代码作为一个…

【网络安全】Web安全基础 - 第二节:前置基础知识- HTTP协议,握手协议,Cookie及Session

本章节主要介绍一些基础知识 d(^_^o) HTTP协议 什么是HTTP 超文本传输协议&#xff08;HyperText Transfer Protocol&#xff09;是一种用于分布式、协作式和超媒体信息系统的应用层协议。 HTTP是一个基于请求与响应&#xff0c;无状态的&#xff0c;应用层协议&#xff0c;…

推荐系统学习 一

参考&#xff1a;一文看懂推荐系统&#xff1a;召回08&#xff1a;双塔模型——线上服务需要离线存物品向量、模型更新分为全量更新和增量更新_数据库全量更新和增量更新流程图-CSDN博客 一文看懂推荐系统&#xff1a;概要01&#xff1a;推荐系统的基本概念_王树森 小红书-CSD…

Web网站攻击技术

文章目录 Web应用体系结构脆弱性分析HTTP协议安全问题Cookie的安全问题 常见Web应用攻击及防范SQL注入攻击及防范SQL注入原理 防御注入漏洞跨站脚本(XSS)攻击及防范跨站脚本(XSS)攻击原理 跨站脚本攻击类型储存式XSS反射式XSSDOM式XSS Cookie欺骗及防范CSRF攻击及防范防御CSRF攻…

python图像识别库-pytesseract

内容目录 一、安装1.安装tesseract OCR1) MAC中安装2) Windows中安装3) 中文报下载 二、pytesseract的简单使用 pytesseract是python的一个用于图像提取的库, 它实际上是对Tesseract OCR引擎的封装。pytesseract使得在Python项目中调用Tesseract变得更加简便&#xff0c;主要用…

Python实现定时任务的方式

大家好&#xff0c;在当今数字化的时代&#xff0c;定时任务的需求在各种应用场景中频繁出现。无论是数据的定时更新、周期性的任务执行&#xff0c;还是特定时间点的操作触发&#xff0c;Python 都为我们提供了强大而灵活的手段来实现这些定时任务。当我们深入探索 Python 的世…

All-in-One WP Migration插件+汉化包+扩展优化版

下载地址&#xff1a;All-in-One WP Migration插件汉化包扩展优化版 此插件支持大量的 WordPress 主机&#xff0c;不用担心网站数据搬家不完全&#xff0c;它使用区块方式导入数据&#xff0c;可避免大多数主机的上传限制&#xff08;还原网站的时候&#xff09;。

C#WPF数字大屏项目实战04--设备运行状态

1、引入Livecharts包 项目中&#xff0c;设备运行状态是用饼状图展示的&#xff0c;因此需要使用livechart控件&#xff0c;该控件提供丰富多彩的图形控件显示效果 窗体使用控件 2、设置饼状图的显示图例 通过<lvc:PieChart.Series>设置环状区域 3、设置饼状图资源样…

Ubuntu系统配置DDNS-GO【笔记】

DDNS-GO 是一个基于 Go 语言的动态 DNS (DDNS) 客户端&#xff0c;用于自动更新你的 IP 地址到 DNS 记录上。这对于经常变更 IP 地址的用户&#xff08;如使用动态 IP 的家庭用户或者小型服务器&#xff09;非常有用。 此文档实验环境为&#xff1a;ubuntu20.04.6。 在Ubuntu…