wxml 中的動態資料均來自對應 page 的 data。
資料繫結使用 mustache 語法(雙大括號)將變數包起來,可以作用於:
mustache 語法 簡介內容
}
page(}
)
元件屬性(需要在雙引號之內)
page(}
)
控制屬性(需要在雙引號之內)
page(}
)
關鍵字(需要在雙引號之內)
true:boolean 型別的 true,代表真值。
false: boolean 型別的 false,代表假值。
特別注意:不要直接寫 checked=「false」,其計算結果是乙個字串,轉成 boolean 型別後代表真值。
可以在 } 內進行簡單的運算,支援的有如下幾種方式:
三元運算
hidden
算數運算
} + } + d
page(}
)
view中的內容為3 + 3 + d
。
邏輯判斷
5}}">
字串運算
}
page(}
)
資料路徑運算
} }
page(,
array:
['mina']}
})
也可以在 mustache 內直接進行組合,構成新的物件或者陣列。
陣列
}
page(}
)
最終組合成陣列[0, 1, 2, 3, 4]
。
物件
page(}
)
最終組合成的物件是
也可以用擴充套件運算子...
來將乙個物件展開
page(,
obj2:}}
)
最終組合成的物件是
。
如果物件的 key 和 value 相同,也可以間接地表達。
page(}
)
最終組合成的物件是
。
注意:上述方式可以隨意組合,但是如有存在變數名相同的情況,後邊的會覆蓋前面,如:
page(,
obj2:
, a:5}
})
最終組合成的物件是
。
注意: 花括號和引號之間如果有空格,將最終被解析成為字串
}
等同於}
從零開始學微信小程式之WXML(2 1)資料繫結
wxml 中的動態資料均來自對應 page 的 data。例如,在wxml中,要引用js中的變數,要用雙花括號括起來,其中資料繫結的 中,也可以是表示式,也支援三目運算 邏輯運算 字串運算 算數運算等。js中的 page 這樣就會將 hello world 顯示在預覽頁面中 其中,wx for vi...
微信小程式 框架wxml(六)wxml引用
wxml提供兩種引用方式,import和include 1.import和include的區別 1 import 可以在檔案中使用被import檔案中定義的template include可以在檔案中使用template及template外的內容。2 import有作用域的概念,只能引用直接impo...
微信小程式 四 wxml詳解
wxml中的動態資料均來自對應js檔案中page的data 在js中訪問page的data用this.data 改變data中某個屬性的值用setdata方法 資料繫結使用mustache語法 雙大括號 將變數包起來.可以作用於以下區域 1.作用於內容 page 2.作用於元件屬性 page 3.作...