选择应用类型
第三方个人应用开发
开发前必读
开发应用
应用管理
服务端API
客户端API
小程序
钉钉小程序介绍
小程序开发工具
小程序运行/更新机制
框架
小程序目录结构
小程序框架概述
文件结构
小程序全局配置
小程序页面配置
AXML视图层
视图层概述
数据绑定
条件渲染
列表渲染
引用
模板
SJS语法参考
ACSS样式语法参考
事件
自定义组件
小程序 scheme
小程序的 JavaScript 引擎
性能优化建议
基础组件
小程序JSAPI
钉钉统一授权套件
常见问题
历史文档

数据绑定

更新于 2023-01-18AXML中的动态数据均来自对应 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}。

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