文档

数据绑定

更新时间:

本文介绍了在模板模式中进行数据绑定的形式。

单数据源绑定

参照 Vue 格式,模板模式下单数据绑定支持插值和指令两种形式。

  • 插值格式仅支持单独使用,不支持混写,如 <text>ab{{var1}}cd</text>。

  • 指令形式支持简写格式。

使用时,可绑定的数据字段(即下表中的 name)由当前组件决定,被绑定的数据变量(即下表中的 variable)支持采用表达式的方式进行定义。

类型

格式

简写

级联

示例

插值

{{variable}}

. 或 []

<text>{{var1.var2}}</text>

指令

v-bind:name="variable"

:name="variable"

. 或 []

<text :value="var1[num1]"></text>

文本类组件(如 text)填充内容时支持的格式包括:

  • [1] <text:value="var"></text> (其中 var="hello_1")

  • [2] <text>{{var}}</text> (其中 var="hello_2")

  • [3] <text>hello_3</text>

解析优先级为 [1] < [2] < [3] ,即最终将显示 hello_3

双数据源绑定

模板支持同时代入两组数据作为待绑定数据源,主要解决实际业务开发过程中 native 侧向模板内注入额外的控制数据,遇到此类需求时,便以启用该功能。

模板注入的数据会和服务器下发的 mock 数据进行合并。注入的数据优先级更高,如有相同字段会覆盖 mock 数据中的对应字段,使用方法和 mock 数据中的字段相同。

//注入的数据
{
title: "title"
}

// 数据提取方式
<text :value=title></text>

示例代码

单击此处 detailBindData.zip 获取完整示例代码。