• 數據綁定
  • 基礎數據綁定
  • 渲染內容
  • 屬性綁定
  • 控制屬性
  • 運算
    • 對象字面量（對象字面量是三個大括號包裹）

數據綁定

SWAN 模板中的動態(tài)數據，都從邏輯層 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