• 数据绑定
  • 基础数据绑定
  • 渲染内容
  • 属性绑定
  • 控制属性
  • 运算
    • 对象字面量（对象字面量是三个大括号包裹）

数据绑定

SWAN 模板中的动态数据，都从逻辑层 Page 中 data 对象来。

基础数据绑定

数据绑定和许多模板引擎一样，数据包裹在双大括号里面。
双向绑定的数据需包裹在{= =}中。

例如：
组件 scroll-view 中，scroll-top 和 scroll-left 的使用方法分别为：

• scroll-top="{= scrollTop =}"
• scroll-left="{= scrollLeft =}"

渲染内容

代码示例

• SWAN
• JS

 
 
 

  
  
  
  
  
  
  
  
  
 Hello My {{ name }}
  
  
  
  
  
  
  
  
  
 
 
 

 
 
 

  
  
  
// data-demo.js
  
  
  
Page({
  
  
  
 data: {
  
  
  
 name: 'SWAN App'
  
  
  
 }
  
  
  
});
 
 
 

属性绑定

代码示例

• SWAN
• JS

 
 
 

  
  
  
  
  
  
属性绑定
 
 
 

 
 
 

  
  
  
// attr-demo.js
  
  
  
Page({
  
  
  
 data: {
  
  
  
 className: 'blue'
  
  
  
 }
  
  
  
});
 
 
 

控制属性

注：属性不需要被双大括号包裹。

代码示例

• SWAN
• JS

 
 
 

  
  
  
  
  
  
如果为flag为true，你看得到我。
 
 
 

 
 
 

  
  
  
// condition-demo.js
  
  
  
Page({
  
  
  
 data: {
  
  
  
 flag: true
  
  
  
 }
  
  
  
});
 
 
 

运算

SWAN 模板提供了丰富的表达式类型支持，让使用者在编写视图模板时更方便。

• 数据访问（普通变量、属性访问）
• 一元否定
• 二元运算
• 二元关系
• 三元条件
• 括号
• 字符串
• 数值
• 布尔

通过下面例子列举支持的表达式类型。

• SWAN

 
 
 

  
  
  
  
  
  
  
  
  
  
  
  
{{name}}
  
  
  
  
  
  
  
  
  
{{person.name}}
  
  
  
{{persons[1]}}
  
  
  
  
  
  
  
  
  
{{!isOK}}
  
  
  
{{!!isOK}}
  
  
  
  
  
  
  
  
  
{{num1 + num2}}
  
  
  
{{num1 - num2}}
  
  
  
{{num1 * num2}}
  
  
  
{{num1 / num2}}
  
  
  
{{num1 + num2 * num3}}
  
  
  
  
  
  
  
  
  
{{num1 > num2}}
  
  
  
{{num1 !== num2}}
  
  
  
  
  
  
  
  
  
{{num1 > num2 ? num1 : num2}}
  
  
  
  
  
  
  
  
  
{{a * (b + c)}}
  
  
  
  
  
  
  
  
  
{{num1 + 200}}
  
  
  
  
  
  
  
  
  
{{item ? ',' + item : ''}}
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
{{ ['john', 'tony', 'lbj'] }}
 
 
 

对象字面量（对象字面量是三个大括号包裹）

注：对象字面量支持了在模板里重组对象以及使用扩展运算符...来展开对象。

代码示例

• SWAN
• JS