选择应用类型
第三方企业应用开发
学习地图
动态与公告
应用开发平台简介(新版)
应用开发平台简介
开发应用(新版)
开发应用
开发小程序
开发流程概述
创建小程序
配置小程序
开发小程序服务端
开发小程序前端
部署小程序
上传和发布小程序
监控小程序
自检小程序
创建服务群
小程序开发参考
框架
小程序目录结构
小程序框架概述
文件结构
小程序全局配置
小程序页面配置
AXML视图层
视图层概述
数据绑定
条件渲染
列表渲染
引用
模板
SJS语法参考
ACSS样式语法参考
事件
自定义组件
小程序 scheme
小程序的 JavaScript 引擎
性能优化建议
基础组件
小程序运行/更新机制
小程序使用H5微应用客户端API
客户端API总览
开发H5微应用
开发酷应用
服务端API
客户端API
AppLink协议
事件订阅
常见问题
运营规范
历史文档

数据绑定

更新于 2023-08-05AXML中的动态数据均来自对应 Page 的data。

简单绑定

数据绑定使用 Mustache 语法(双大括号)将变量包起来,可以作用于各种场合。

  • 作用于内容的例子:

    Loading...
    Loading...
  • 作用于组件属性的例子(需要在双引号之内):

    Loading...
    Loading...
  • 作用于控制属性的例子(需要在双引号之内):

    Loading...
    Loading...
  • 作用于关键字的例子(需要在双引号之内):

    说明

    true

    boolean 类型的 true,代表真值

    false

    boolean 类型的 false,代表假值

    Loading...
    重要

    如果直接写checked="false",计算结果是一个字符串,转成布尔值类型后代表true。

运算

可以在 {{}} 内进行简单的运算,支持的有如下几种方式:

  • 三元运算

    Loading...
  • 算数运算

    Loading...
    Loading...

    View 中的内容为3 + 3 + d

  • 逻辑判断

    Loading...
  • 字符串运算

    Loading...
    Loading...
  • 数据路径运算

    Loading...
    Loading...

组合

也可以在 Mustache 内直接进行组合,构成新的数组或者对象。

  • 数组

    Loading...
    Loading...

    最终组合成数组[0, 1, 2, 3, 4]。

  • 对象

    Loading...
    Loading...

    最终组合成的对象是 {foo: 1, bar: 2}。

    也可以用扩展运算符...来将一个对象展开。

    Loading...
    Loading...

    最终组合成的对象是 {a: 1, b: 2, c: 3, d: 4, e: 5}。

    如果对象的 key 和 value 相同,也可以间接地表达。

    Loading...
    Loading...

    最终组合成的对象是 {foo: 'my-foo', bar:'my-bar'}。

    重要

    上面的方式可以随意组合,但是如有存在变量名相同的情况,后边的变量会覆盖前面变量。

    Loading...
    Loading...

    最终组合成的对象是 {a: 5, b: 3, c: 6}。

这篇文档是否有帮助?
点击纠错