wxml資料繫結

2021-08-08 16:09:15 字數 2443 閱讀 1979

wxml 中的動態資料均來自對應 page 的 data。

資料繫結使用 mustache 語法(雙大括號)將變數包起來,可以作用於:

 } view>
page(

})

id="item-}">

view>

page(

})

wx:if="}">

view>

<

view

wx:if=

'}'style=

'color:}'> //推薦雙引號,但是單引號也能用

page(

})

true:boolean 型別的 true,代表真值。

false: boolean 型別的 false,代表假值。

checked="}">

checkbox>

特別注意:不要直接寫checked="false",其計算結果是乙個字串,轉成 boolean 型別後代表真值。

可以在}內進行簡單的運算,支援的有如下幾種方式:

hidden="}"> hidden view>
 } + } + d view>
page(

})

view中的內容為3 + 3 + d

wx:if="}">

view>

}view>
page(

})

} }view>
page(,

array: ['mina']

}})

wx:for="}"> } view>
page(

})

最終組合成陣列[0, 1, 2, 3, 4]

例項:wxml

}

展示為

1 

2 3

4 2

32 12

23 34

546

56 33

23 546

is="objectcombine"

data="}">

template>

page(

})

最終組合成的物件是

也可以用擴充套件運算子...來將乙個物件展開

is="objectcombine"

data="}">

template>

page(,

obj2:

}})

最終組合成的物件是

如果物件的 key 和 value 相同,也可以間接地表達。

is="objectcombine"

data="}">

template>

page(

})

最終組合成的物件是

注意:上述方式可以隨意組合,但是如有存在變數名相同的情況,後邊的會覆蓋前面,如:

is="objectcombine"

data="}">

template>

page(,

obj2: ,

a: 5

}})

最終組合成的物件是

模板例項:

firstname: }, lastname: }

注意: 花括號和引號之間如果有空格,將最終被解析成為字串

wx:for="} ">

}view>

等同於

wx:for="}">

}view>

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

wxml 中的動態資料均來自對應 page 的 data。資料繫結使用 mustache 語法 雙大括號 將變數包起來,可以作用於 mustache 語法 簡介 內容 page 元件屬性 需要在雙引號之內 page 控制屬性 需要在雙引號之內 page 關鍵字 需要在雙引號之內 true boole...

小程式資料繫結渲染wxml標籤,渲染字串

借用乙個工具方法 我已經fork到這裡了,感謝原文icindy wxparse 基本使用方法 1.copy資料夾wxparse wxparse wxparse.js 必須存在 html2json.js 必須存在 htmlparser.js 必須存在 showdown.js 必須存在 wxdiscod...

wxml如何注釋 WXML注釋規範 md

注釋 是由人編寫並維護的,我們要盡可能保證寫的 能夠自描述 注釋良好並且易於他人理解。好的注釋能夠傳達上下文關係和 目的。注釋 以 結尾。標準寫法 錯誤寫法 團隊約定 單行注釋 一般用於簡單的描述,如狀態描述,屬性描述等。書寫時應遵循以下規範 注釋內容前後各乙個空格字元 注釋位於注釋 上面 單獨佔一...