微信小程序 數(shù)據(jù)綁定

WXML 中的動態(tài)數(shù)據(jù)均來自對應(yīng) Page 的 data。

簡單綁定

數(shù)據(jù)綁定使用 Mustache 語法(雙大括號)將變量包起來眶诈,可以作用于:
內(nèi)容

<view> {{ message }} </view>
Page({
  data: {
    message: 'Hello MINA!'
  }
})

組件屬性(需要在雙引號之內(nèi))

<view id="item-{{id}}"> </view>
Page({
  data: {
    id: 0
  }
})

控制屬性(需要在雙引號之內(nèi))

<view wx:if="{{condition}}"> </view>
Page({
  data: {
    condition: true
  }
})

關(guān)鍵字(需要在雙引號之內(nèi))

true:boolean 類型的 true涨醋,代表真值。
false: boolean 類型的 false逝撬,代表假值浴骂。
<checkbox checked="{{false}}"> </checkbox>

特別注意:不要直接寫 checked="false",其計算結(jié)果是一個字符串球拦,轉(zhuǎn)成 boolean 類型后代表真值靠闭。

運算

可以在 {{}} 內(nèi)進(jìn)行簡單的運算,支持的有如下幾種方式:

三元運算

<view hidden="{{flag ? true : false}}"> Hidden </view>

算數(shù)運算

<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'
  }
})

數(shù)據(jù)路徑運算

<view>{{object.key}} {{array[0]}}</view>
Page({
  data: {
    object: {
      key: 'Hello '
    },
    array: ['MINA']
  }
})

組合

也可以在 Mustache 內(nèi)直接進(jìn)行組合愧膀,構(gòu)成新的對象或者數(shù)組。
數(shù)組

<view wx:for="{{[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 相同,也可以間接地表達(dá)萄金。
<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>
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末浙炼,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子唯袄,更是在濱河造成了極大的恐慌弯屈,老刑警劉巖,帶你破解...
    沈念sama閱讀 218,546評論 6 507
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件恋拷,死亡現(xiàn)場離奇詭異资厉,居然都是意外死亡,警方通過查閱死者的電腦和手機蔬顾,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,224評論 3 395
  • 文/潘曉璐 我一進(jìn)店門宴偿,熙熙樓的掌柜王于貴愁眉苦臉地迎上來湘捎,“玉大人,你說我怎么就攤上這事酪我∠矗” “怎么了?”我有些...
    開封第一講書人閱讀 164,911評論 0 354
  • 文/不壞的土叔 我叫張陵都哭,是天一觀的道長秩伞。 經(jīng)常有香客問我,道長欺矫,這世上最難降的妖魔是什么纱新? 我笑而不...
    開封第一講書人閱讀 58,737評論 1 294
  • 正文 為了忘掉前任,我火速辦了婚禮穆趴,結(jié)果婚禮上脸爱,老公的妹妹穿的比我還像新娘。我一直安慰自己未妹,他們只是感情好簿废,可當(dāng)我...
    茶點故事閱讀 67,753評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著络它,像睡著了一般族檬。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上化戳,一...
    開封第一講書人閱讀 51,598評論 1 305
  • 那天单料,我揣著相機與錄音,去河邊找鬼点楼。 笑死扫尖,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的掠廓。 我是一名探鬼主播换怖,決...
    沈念sama閱讀 40,338評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼蟀瞧!你這毒婦竟也來了沉颂?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,249評論 0 276
  • 序言:老撾萬榮一對情侶失蹤黄橘,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后屈溉,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體塞关,經(jīng)...
    沈念sama閱讀 45,696評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,888評論 3 336
  • 正文 我和宋清朗相戀三年子巾,在試婚紗的時候發(fā)現(xiàn)自己被綠了帆赢。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片小压。...
    茶點故事閱讀 40,013評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖椰于,靈堂內(nèi)的尸體忽然破棺而出怠益,到底是詐尸還是另有隱情,我是刑警寧澤瘾婿,帶...
    沈念sama閱讀 35,731評論 5 346
  • 正文 年R本政府宣布蜻牢,位于F島的核電站,受9級特大地震影響偏陪,放射性物質(zhì)發(fā)生泄漏抢呆。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,348評論 3 330
  • 文/蒙蒙 一笛谦、第九天 我趴在偏房一處隱蔽的房頂上張望抱虐。 院中可真熱鬧,春花似錦饥脑、人聲如沸恳邀。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,929評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽谣沸。三九已至,卻和暖如春框往,著一層夾襖步出監(jiān)牢的瞬間鳄抒,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,048評論 1 270
  • 我被黑心中介騙來泰國打工椰弊, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留许溅,地道東北人。 一個月前我還...
    沈念sama閱讀 48,203評論 3 370
  • 正文 我出身青樓秉版,卻偏偏與公主長得像贤重,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子清焕,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,960評論 2 355

推薦閱讀更多精彩內(nèi)容