微信小程式 WXML語法之資料繫結

2021-10-09 00:14:55 字數 1957 閱讀 5971

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.作...