您好,登錄后才能下訂單哦!
這篇文章主要介紹“WXML中的動態(tài)數(shù)據(jù)怎么綁定”,在日常操作中,相信很多人在WXML中的動態(tài)數(shù)據(jù)怎么綁定問題上存在疑惑,小編查閱了各式資料,整理出簡單好用的操作方法,希望對大家解答”WXML中的動態(tài)數(shù)據(jù)怎么綁定”的疑惑有所幫助!接下來,請跟著小編一起來學(xué)習(xí)吧!
WXML中的動態(tài)數(shù)據(jù)均來自對應(yīng)Page的data。
數(shù)據(jù)綁定使用"Mustache"語法(雙大括號)將變量包起來,可以作用于:
<view> {{ message }} </view>
Page({ data: { message: 'Hello MINA!' } })
<view id="item-{{id}}"> </view>
Page({ data: { id: 0 } })
<view wx:if="{{condition}}"> </view>
Page({ data: { condition: true } })
true
:boolean 類型的 true,代表真值。
false
: boolean 類型的 false,代表假值。
<checkbox checked="{{false}}"> </checkbox>
特別注意:不要直接寫 checked="false"
,其計算結(jié)果是一個字符串,轉(zhuǎn)成 boolean 類型后代表真值。
可以在{{}}
內(nèi)進行簡單的運算,支持的有如下幾種方式:
<view hidden="{{flag ? true : false}}"> Hidden </view>
<view> {{a + b}} + {{c}} + d </view>
Page({ data: { a: 1, b: 2, c: 3 } })
view中的內(nèi)容為3 + 3 + d
。
<view wx:if="{{length > 5}}"> </view>
<view>{{"hello" + name}}</view>
Page({ data:{ name:"MINA" } })
<view>{{object.key}} {{array[0]}}</view>
Page({ data: { object: { key: 'Hello '},array: ['MINA'] } })
也可以在Mustache內(nèi)直接進行組合,構(gòu)成新的對象或者數(shù)組。
<view wx:for-items="{{[zero, 1, 2, 3, 4]}}"> {{item}} </view>
Page({ data: { zero: 0 } })
最終組合成數(shù)組[0, 1, 2, 3, 4]。
<template is="objectCombine" data="{{for: a, bar: b}}"></template>
Page({ data: { a: 1, b: 2 } })
最終組合成的對象是{for: 1, bar: 2}
也可以用擴展運算符...
來將一個對象展開
<template is="objectCombine" data="{{...obj1, ...obj2, e: 5}}"></template>
Page({ data: { obj1: { a: 1, b: 2}, obj2: { c: 3, d: 4} } })
最終組合成的對象是{a: 1, b: 2, c: 3, d: 4, e: 5}
如果對象的key和value相同,也可以間接地表達。
<template is="objectCombine" data="{{foo, bar}}"></template>
Page({ data: { foo: 'my-foo', bar: 'my-bar' } })
最終組合成的對象是{foo: 'my-foo', bar:'my-bar'}
。
注意:上述方式可以隨意組合,但是如有存在變量名相同的情況,后邊的會覆蓋前面,如:
<template is="objectCombine" data="{{...obj1, ...obj2, a, c: 6}}"></template>
Page({ data: { obj1: { a: 1, b: 2}, obj2: { b: 3, c: 4}, a: 5 } })
最終組合成的對象是 {a: 5, b: 3, c: 6}
。
注意: 花括號和引號之間如果有空格,將最終被解析成為字符串
<view wx:for="{{[1,2,3]}} "> {{item}}</view>
等同于
<view wx:for="{{[1,2,3] + ' '}}"> {{item}}</view>
到此,關(guān)于“WXML中的動態(tài)數(shù)據(jù)怎么綁定”的學(xué)習(xí)就結(jié)束了,希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學(xué)習(xí),快去試試吧!若想繼續(xù)學(xué)習(xí)更多相關(guān)知識,請繼續(xù)關(guān)注億速云網(wǎng)站,小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。