选择应用类型
企业内部应用开发
学习地图
动态与公告
应用开发平台简介(新版)
应用开发平台简介
开发应用(新版)
开发流程概述
获取开发者权限
创建应用
添加应用能力
配置应用
开发 AI 应用
开发小程序应用
(可选)开发小程序服务端
(可选)配置安全域名
开发小程序前端
上传小程序
(可选)添加小程序地址
小程序开发参考
框架
小程序目录结构
小程序框架概述
文件结构
小程序全局配置
小程序页面配置
AXML视图层
视图层概述
数据绑定
条件渲染
列表渲染
引用
模板
SJS语法参考
ACSS样式语法参考
事件
自定义组件
小程序 scheme
小程序的 JavaScript 引擎
性能优化建议
基础组件
鸿蒙适配指南
移动客户端接入
小程序运行/更新机制
小程序使用网页应用客户端 API
客户端API总览
开发网页应用
开发酷应用
开发机器人应用
发布应用
监控应用
开发应用
服务端API
客户端API
事件订阅
参考
常见问题
历史文档

数据绑定

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

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