【微信小程序】模板语法

数据绑定

对应页面的 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

相关推荐

  1. 程序(二) ——模版语法1

    2024-06-09 00:34:05       28 阅读
  2. 程序-wxml语法

    2024-06-09 00:34:05       22 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-06-09 00:34:05       16 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-06-09 00:34:05       16 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-06-09 00:34:05       15 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-06-09 00:34:05       18 阅读

热门阅读

  1. 力扣209.长度最小的数组

    2024-06-09 00:34:05       10 阅读
  2. 安装和配置MySQL数据库通常分为几个步骤

    2024-06-09 00:34:05       10 阅读
  3. P2471 [SCOI2007] 降雨量

    2024-06-09 00:34:05       10 阅读
  4. 阿里云计算之运维概念学习笔记(一)

    2024-06-09 00:34:05       10 阅读
  5. C++中的模板---下

    2024-06-09 00:34:05       8 阅读
  6. 分布式Shiro,SpringBoot项目Shiro整合Redis

    2024-06-09 00:34:05       9 阅读
  7. 【SpringBoot】打包成Docker镜像后日志输出中文乱码

    2024-06-09 00:34:05       10 阅读
  8. Leetcode:删除链表的倒数第N个结点

    2024-06-09 00:34:05       7 阅读
  9. 开发指南028-生成二维码

    2024-06-09 00:34:05       8 阅读
  10. C++day3

    C++day3

    2024-06-09 00:34:05      7 阅读
  11. 用户价值模型-RFM模型

    2024-06-09 00:34:05       8 阅读
  12. 汇编语言-----开始到寄存器

    2024-06-09 00:34:05       6 阅读