1、Weex使用語法({{...}})來對<template>中的模板和<script>裏的數據進行綁定. 一旦數據和模板綁定了, 數據上的修改會實時的在模板內容中生效.
示例1：（直接把title和size的數值綁定到模板內容）
<template>
<container>
<text style="font-size:{{size}}">{{title}}</text>
</container>
</template>
<script>
module.exports={
data:{
size:55,
title:"字體大小"
}
}
</script>
示例2：（通過.符號來綁定數據結構中的字段）
<template>
<container>
<text style="font-size:{{title.size}}">{{title.value}}</text>
</container>
</template>
<script>
module.exports = {
data:{
title:{
size:55,
value:'字體大小'
}
}
}
</script>
2、In-template表達式。
進行數據綁定時, Weex支持一些簡單的javascript表達式，這些表達式會在當前的上下文中進行演算（但注意每個綁定只能包含單個表達式）
<template>
<container style="flex-direction:row;">
<text>{{name+'先生，來自於' + address}}</text>
</container>
</template>
<script>
module.exports = {
data:{
name:'張',
address:'上海市黃浦區'
}
}
</script>
3、Computed Properties
in-template表達式相比於簡單的操作符很方便. 但如果需要在模板裏實現更多的邏輯判斷,你可以使用computed property。
<template>
<container style="flex-direction:row;">
<text>{{name}}</text>
<text onclick="changeName">變更</text>
</container>
</template>
<script>
module.exports = {
data:{
firName:'張三瘋',
secName:'李四旺'
},
computed:{
name:{
get:function(){
return this.firName + ';' + this.secName;
},
set:function(v){
var s = v.split(';');
this.firName = s[0];
this.secName = s[1];
}
}
},
methods:{
changeName:function(){
this.name = "王五;劉六";
}
}
}
</script>
說明：代碼裏定義了一個computed property name. 它所提供的函數能作爲gettter函數實現連接字符串firName和secName.
除此以外當由點擊出發了changeName後, setter函數會被調用,並且this.firName和this.secName會對應的更新.
注意：data 和 methods 不能有重複的字段. 因爲在執行的上下文中 -- this, 能同時指向這兩者。
4、數據綁定中的特殊屬性
（1）樣式和類
示例1：通過style屬性綁定
<template>
<text style="font-size: {{size}}; color: {{color}}; ..."> </text>
</template>
示例2：通過class屬性綁定（此時，如果{{size}} 和 {{status}} 是空值, 就只有class="title" 會被渲染）
<template>
<container>
<text class="{{size}}"></text>
<text class="title {{status}}"></text>
</container>
</template>
（2）事件處理器
以on...開頭的就是用於指定事件處理器的屬性, 屬性名中'on'之後的部分就是事件的類型, 屬性的值就是對應進行事件處理的函數名. 不需要添加mustache語法中的大括號或者函數調用時的圓括號
<template>
<text onclick="toggle">Toggle</text>
</template>
<script>
module.exports = {
methods: {
toggle: function () {
// todo
}
}
}
</script>
（3）if & repeat
if 屬性能夠通過true/false值控制組件是否顯示等，通過repeat屬性來生成列表。
示例：
<template>
<container style="flex-direction: column;">
<text style="text-align: center;" onclick="toggle">顯示or隱藏</text>
<image class="thumb" src="http://t.cn/RGE3AJt" if="{{shown}}"></image>
</container>
</template>
<style>
.thumb { width: 200; height: 200; }
</style>
<script>
module.exports = {
data: {
shown: true
},
methods: {
toggle: function () {
this.shown = !this.shown
}
}
}
</script>
注意：
當你修改 data 中的數組時，在寫法上會受到一定的限制，具體如下
直接通過 index 修改數組的某個項目 (如 vm.items[0] = {};) 是不會觸發視圖自動更新的。我們在數組的原型上提供了一個額外的方法：$set(index, item).
比如：
// 和 `example1.items[0] = ...` 作用相同，但會自動觸發視圖更新
example1.items.$set(0, { childMsg: 'Changed!'})
直接通過修改 length 來改變數組長度 (如 vm.items.length = 0) 也是不會觸發視圖自動更新的。我們推薦您直接賦值一個新的空數組把舊的替換掉。
比如：
// 和 `example2.items.length = 0` 作用相同，但會自動觸發視圖更新
example2.items = []
（4）static
static 屬性可以取消數據綁定機制，從而數據更新不會再同步到 UI 界面
<template>
<div static>
<text>{{ word }}</text>
</div>
</template>
<script>
module.exports = {
ready: function() {
this.word = 'Data changes'
},
data: {
word: 'Hello, static'
}
}
</script>
如上所示，添加 static 關鍵字，渲染結果會是 Hello, static，相當於渲染一個靜態的節點，ready 函數中對數據
word 的改變不會被監聽，從而 text 值不會改變。 注意：static 屬性設計的目的是爲了降低長列表、純靜態頁面的內存開銷。小心的使用它，因爲它可能會中斷你的頁面邏輯。