【微信小程序】模板语法

数据绑定

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

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

事件绑定

事件触发

常用事件:

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

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

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

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

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

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

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

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

这里所传参数为 info=2

数据修改

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

条件渲染

wx:if

结合 <block> 使用 wx:if

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

<block>标签上使用wx:if控制属性,示例如下:

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

hidden

控制显示与异常。

wx:if 与 hidden 对比:

列表渲染

wx:for

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

相关推荐
小小谈电商4 小时前
2026 年 8 月|国内企业级商城源码服务商全方位测评报告
大数据·运维·小程序
ZhiMuZhiLing6 小时前
企业获客软件免安装能力横评:网页端和小程序端实测数据
大数据·小程序·流量运营·用户运营
lhldsg6 小时前
课程排课系统实战指南:从数据库设计到算法调优全流程解析
java·数据库·算法·小程序
Ai-_Man7 小时前
AI办公智能体工作平台能否电脑批量导出?我们拆解了“AI导出鸭”的底层逻辑
人工智能·ai·小程序·电脑
博、、8 小时前
课程培训系统如何选型?从架构设计到答题模块的实战经验
小程序·需求分析
编程小橘子8 小时前
基于微信小程序健康心理测试、设计与实现 (源码+lw+参考文档+核心代码讲解等)
微信小程序·小程序·毕业设计·毕设
AI行业应用研究10 小时前
2026年主流报名工具测评报告:眨眼猫会务智能体报名小程序为何成为多场景首选?
java·开发语言·小程序
v1588972620110 小时前
货运搬家小程序从0到1(五):JWT 鉴权,拦截器 + ThreadLocal 用户上下文
小程序·货运小程序源码·货运小程序·搬家小程序
维双云11 小时前
2026开发小程序公司有哪些?专业团队与服务路线整理。
小程序
m0_4628038811 小时前
从产品逻辑看云分组「优先分组」如何实现培训会议按排自动分座
微信小程序