【微信小程序】模板语法

数据绑定

对应页面的 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.mzph.cn/bicheng/23096.shtml

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

相关文章

免费,C++蓝桥杯等级考试真题--第10级(含答案解析和代码)

C蓝桥杯等级考试真题--第10级 答案&#xff1a;D 解析&#xff1a;数组是一种线性数据结构&#xff0c;其特点是数组中的元素在内存中占据一段连续的存储空间&#xff0c;每个元素通过索引&#xff08;下标&#xff09;访问&#xff0c;索引起始通常是0。 数组的长度在声明时…

操作符详解

一、移位操作符 1.1左移操作 左边丢弃&#xff0c;右边补0 1.2右移操作 算数右移&#xff1a;右边丢弃&#xff0c;左边补原符号位 逻辑右移&#xff1a;右边丢弃&#xff0c;左边补0 int main() {int a -1;int b a >> 1;printf("b%d\n",b);return 0; } 原码…

厘米级精确定位,开启定位技术新时代

定位技术在当前这个科技发展时代可以说是以以前所未有的速度在发展&#xff0c;其中厘米级精确定位技术更是成为当前的研究热点和实际应用中的佼佼者。这项技术以其高度的精准性和广泛的应用前景&#xff0c;正在逐渐改变我们的生活和工作方式。接下来我们跟着深圳沧穹科技一起…

在vue项目中使用markdown-it回显markdown文本

前言 其实有很多插件都是可以用来回显markdown文本的,这个插件也是其中之一。 文档地址:markdown-it | markdown-it 中文文档 这个文档在vue2和vue3里面都可以使用,所以还是比较推荐的 使用 安装 npm install markdown-it --save 应用 <template><div><…

微服务开发与实战Day02 - Docker

一、Docker快速入门 快速构建、运行、管理应用的工具 安装部署教程&#xff1a;Docs 1. 部署MySQL 测试连接&#xff1a; 镜像和容器 当我们利用Docker安装应用时&#xff0c;Docker会自动搜索并下载应用镜像&#xff08;image&#xff09;。镜像不仅包含应用本身&#xff…

天润融通,荣获2024中国AI应用层创新企业

AI技术发展日新月异&#xff0c;可谓“AI一天&#xff0c;人间一年”。 从2023年到2024年&#xff0c;短短一年的时间&#xff0c;大模型技术的发展就已经逐步从追求“技术突破”转向了追求“应用落地”。如何将大模型的技术与企业的生产、运营、销售等场景结合起来&#xff0…

java版CRM客户关系管理系统源码:CRM客户关系管理系统的功能详解

CRM客户关系管理系统是一款功能全面的客户管理工具&#xff0c;旨在帮助企业和销售团队提高客户管理效率&#xff0c;优化销售流程。该系统包含多个模块&#xff0c;覆盖了从线索到回款的全流程管理&#xff0c;为用户提供了一个集成化的客户关系管理平台。 一、待办事项模块&a…

Docker 部署 Redis Cluster 高性能高可用分片集群

文章目录 1、环境准备2、Cluster 集群讲解2.1、Cluster 介绍2.2、Cluster 和哨兵模式区别2.3、Cluster 如何分散存储数据 3、Cluster 搭建流程3.1、安装 Docker3.2、启动 Redis 容器3.3、创建 Cluster 集群 4、Cluster 集群测试4.1、读写操作4.2、故障转移 1、环境准备 准备6台…

基于Keil5移植LVGL,懂得原理之后什么开发板都可以移植

今天我们来移植一下LVGL&#xff0c;其实LVGL和Qt差不多&#xff0c;操作起来都很简单&#xff0c;看着官方文档都可以自己学习使用。 难就难在移植上面&#xff0c;移植个LVGL花了我三天才弄明白&#xff08;虽然最后发现在一个很弱智的问题上耽误了我两天&#xff09;&#…

oracle 打补丁遇到 check “CheckActiveFilesAndExecutables“ failed报错处理方法

该报错是因为打补丁的时候停止集群没有停止干净进程导致的 问题 处理方法 强制停止打补丁所在节点集群服务 查看grid和oracle相关进程是否停止干净&#xff0c;发现有未关闭的进程手动kill 处理完毕继续打补丁即可

跟着大佬学RE(四)

几个API函数 [ACTF新生赛2020]Universe_final_answer 一个很多方程组的函数&#xff0c;还有一个嗯&#xff0c;对input进行一些操作的函数 嗯&#xff0c;确实方程解出来得到 key 直接运行就可以得到 flag 了&#xff0c;不过还是去分析了一下。 v22 __readfsqword(0x28u);…

【深度学习】安全帽检测,目标检测,Faster RCNN训练

文章目录 资料环境尝试训练安全帽数据训练测试预测全部数据、代码、训练完的权重等资料见&#xff1a; 资料 依据这个进行训练&#xff1a; https://github.com/WZMIAOMIAO/deep-learning-for-image-processing/tree/master/pytorch_object_detection/faster_rcnn ├── bac…

nt9856_sensor_driver camera i2c无响应

前言 最新更换了不同的平台进行开发&#xff0c;所以一心在研究和学习中&#xff0c;没有太多的时间发布文章&#xff0c;最近开开始上手了&#xff0c;抽空把之前的工作记录进行总结和发布。从原来的高通和瑞芯微转到了国科和海思联咏&#xff0c;整体的架构不太一致&#xff…

【JVM】已验鼎真,鉴定为:妈妈加载的(双亲委派模型)

【JVM】已验鼎真&#xff0c;鉴定为&#xff1a;妈妈加载的&#xff08;双亲委派模型&#xff09; 在Java的世界中&#xff0c;类加载器&#xff08;ClassLoader&#xff09;是Java虚拟机&#xff08;JVM&#xff09;用来动态加载类的基础组件。双亲委派模型&#xff08;Paren…

安装和使用conda

Conda 是一个开源的软件包管理系统和环境管理系统&#xff0c;用于安装多个版本的软件包及其依赖关系&#xff0c;并在它们之间轻松切换。可以创建多个环境&#xff0c;并在环境中使用不同的python版本&#xff0c;并安装环境专属的python依赖包&#xff0c;可以用来避免python…

MySQL中:cmd下输入命令mysql -uroot -p 连接数据库错误

目录 问题cmd下输入命令mysql -uroot -p错误 待续、更新中 问题 cmd下输入命令mysql -uroot -p错误 解决 配置环境变量&#xff1a;高级系统设置——环境变量——系统变量——path编辑——新建——MySQL.exe文件路径&#xff08;如下图所示&#xff09; phpstudy2018软件下&am…

王学岗鸿蒙开发(北向)——————(二)TS基本语法详解

1&#xff0c;Ts(TypeScript)语法相当于JAVAScript类型&#xff0c;鸿蒙arkTs是基于TS语言的,当然artTs也融合了其它的语言。 2&#xff0c;本篇文章是基于n9版本。注意,有些语法是已经不能用的。 3&#xff0c; 4&#xff0c;变量:用来存储数据,数字字母组成&#xff0c;数字不…

泛微开发修炼之旅--07通过后端代码实现创建并发送待办、源码及示例

文章链接&#xff1a;泛微开发修炼之旅--07通过后端代码实现创建并发送待办、源码及示例

解决找不到api-ms-win-crt-runtime-l1-1-0.dll问题的5种方法

电脑已经成为我们生活和工作中不可或缺的工具&#xff0c;然而&#xff0c;由于各种原因&#xff0c;我们可能会遇到一些常见的问题&#xff0c;其中之一就是电脑缺失api-ms-win-crt-runtime-l1-1-0.dll文件。这个问题可能会导致电脑出现错误提示、程序无法正常运行等困扰。为了…

[Redis]Zset类型

Zset有序集合相对于字符串、列表、哈希、集合来说会有一些陌生。 它保留了集合不能有重复成员的特点&#xff0c;但与集合不同的是&#xff0c;有序集合中的每个元素都有一个唯一的浮点类型的分数&#xff08;score&#xff09;与之关联&#xff0c;着使得有序集合中的元素是可…