【微信小程序】模板语法

数据绑定

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

相关推荐
计算机-秋大田6 小时前
基于微信小程序的电子竞技信息交流平台设计与实现(LW+源码+讲解)
spring boot·后端·微信小程序·小程序·课程设计
计算机徐师兄11 小时前
Java基于SSM框架的互助学习平台小程序【附源码、文档】
小程序·互助学习·互助学习平台小程序·java互助学习微信小程序·互助学习微信小程序·互助学习平台微信小程序
西农小陈12 小时前
Python-基于PyQt5,wordcloud,pillow,numpy,os,sys的智能词云生成器
开发语言·python·小程序·pycharm·numpy·pyqt·pillow
Stanford_110613 小时前
C++中常用的十大排序方法之4——希尔排序
c++·算法·微信小程序·排序算法·微信公众平台·twitter·微信开放平台
说私域14 小时前
开源AI智能名片2+1链动模式S2B2C商城小程序:重塑私域流量运营格局
人工智能·小程序·流量运营
Colinnian17 小时前
微信小程序中在一个大边框里给每个小边框均匀分配空间
微信小程序·小程序·notepad++
一 乐17 小时前
基于微信小程序的酒店管理系统设计与实现(源码+数据库+文档)
java·数据库·vue.js·spring boot·微信小程序·酒店管理系统
说私域1 天前
今日头条公域流量引流新径:开源 AI 智能名片 2 + 1 链动模式 S2B2C 商城小程序融合之道
人工智能·小程序
曾经的三心草1 天前
小程序-基础加强
小程序·基础加强
说私域1 天前
智能调度体系与自动驾驶技术优化运输配送效率的研究——兼论开源AI智能名片2+1链动模式S2B2C商城小程序的应用潜力
人工智能·小程序·自动驾驶