• 數(shù)據(jù)綁定
  • 基礎(chǔ)數(shù)據(jù)綁定
  • 渲染內(nèi)容
  • 屬性綁定
  • 控制屬性
  • 運(yùn)算
    • 對(duì)象字面量（對(duì)象字面量是三個(gè)大括號(hào)包裹）

數(shù)據(jù)綁定

SWAN 模板中的動(dòng)態(tài)數(shù)據(jù)，都從邏輯層 Page 中 data 對(duì)象來(lái)。

基礎(chǔ)數(shù)據(jù)綁定

數(shù)據(jù)綁定和許多模板引擎一樣，數(shù)據(jù)包裹在雙大括號(hào)里面。
雙向綁定的數(shù)據(jù)需包裹在{= =}中。

例如：
組件 scroll-view 中，scroll-top 和 scroll-left 的使用方法分別為：

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

渲染內(nèi)容

代碼示例

• SWAN
• JS

 
 
 

  
  
  
  
  
  
  
  
  
 Hello My {{ name }}
  
  
  
  
  
  
  
  
  
 
 
 

 
 
 

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

屬性綁定

代碼示例

• SWAN
• JS

 
 
 

  
  
  
  
  
  
屬性綁定
 
 
 

 
 
 

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

控制屬性

注：屬性不需要被雙大括號(hào)包裹。

代碼示例

• SWAN
• JS

 
 
 

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

 
 
 

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

運(yùn)算

SWAN 模板提供了豐富的表達(dá)式類型支持，讓使用者在編寫視圖模板時(shí)更方便。

• 數(shù)據(jù)訪問(wèn)（普通變量、屬性訪問(wèn)）
• 一元否定
• 二元運(yùn)算
• 二元關(guān)系
• 三元條件
• 括號(hào)
• 字符串
• 數(shù)值
• 布爾

通過(guò)下面例子列舉支持的表達(dá)式類型。

• 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'] }}
 
 
 

對(duì)象字面量（對(duì)象字面量是三個(gè)大括號(hào)包裹）

注：對(duì)象字面量支持了在模板里重組對(duì)象以及使用擴(kuò)展運(yùn)算符...來(lái)展開(kāi)對(duì)象。

代碼示例

• SWAN
• JS