本文介绍了在模板模式中进行数据绑定的形式。
单数据源绑定
参照 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 获取完整示例代码。
文档内容是否对您有帮助?