微信小程序 數(shù)據(jù)綁定及運(yùn)算的簡單實例
微信小程序 數(shù)據(jù)綁定的簡單實例
簡單用法:
Page({ data: { message: '張三' } }) /** * 生命周期函數(shù)--監(jiān)聽頁面加載 */ onLoad: function (options) { var content1={ date: "2020年 10月 8日 ", title:"時間群" , nameData:{ name1:"張三李四", name2:"人五人六", }, fade:true/false } this.setData(content); },
數(shù)據(jù)綁定使用 Mustache 語法(雙大括號)將變量包起來獲取
<view> {{ date}} </view> <view> {{ title}} </view> <view> {{ nameData.name1}} </view> <view> {{ nameData.name2}} </view>//層級用點取值 <image wx:if="{{fade}}" class="image" src=""></image>//隱藏/顯示
可以在 {{}} 內(nèi)進(jìn)行簡單的運(yùn)算
三元運(yùn)算符
<view hidden="{{flag ? true : false}}"> Hidden </view>
計算
Page({ data: { a: 1, b: 2, c: 3 } })
<view> {{a + b}} + {{c}} + d </view> 輸出結(jié)果:3 + 3 + d。
邏輯判斷
<view wx:if="{{length > 5}}"> </view>
也可以在 Mustache 內(nèi)直接進(jìn)行組合,構(gòu)成新的對象或者數(shù)組。
Page({ data: { zero: 0 } })
<view wx:for="{{[zero, 1, 2, 3, 4]}}"> {{item}} </view>
輸出結(jié)果:組合成數(shù)組[0, 1, 2, 3, 4]。
對象
Page({ data: { a: 1, b: 2 } })
<template is="objectCombine" data="{{for: a, bar: b}}"></template>
最終組合成的對象是 {for: 1, bar: 2}
如有疑問請留言或者到本站社區(qū)交流討論,感謝閱讀,希望能幫助到大家,謝謝大家對本站的支持!
相關(guān)文章
JS中的every()對空數(shù)組總返回true原理分析
這篇文章主要為大家介紹了JS中的every()對空數(shù)組總返回true原理分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-09-09微信小程序?qū)崿F(xiàn)緩存根據(jù)不同的id來進(jìn)行設(shè)置和讀取緩存
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)緩存根據(jù)不同的id來進(jìn)行設(shè)置和讀取緩存的相關(guān)資料,需要的朋友可以參考下2017-06-06微信小程序 免費(fèi)SSL證書https、TLS版本問題的解決辦法
這篇文章主要介紹了微信小程序 免費(fèi)SSL證書https、TLS版本問題的解決辦法的相關(guān)資料,需要的朋友可以參考下2016-12-12徒手實現(xiàn)關(guān)于JavaScript的24+數(shù)組方法
數(shù)組是我們?nèi)粘9ぷ髦杏玫淖铑l繁的一類數(shù)據(jù)結(jié)構(gòu),能幫助我們解決許多問題,而其本身也包含接近33個之多的方法,做了一個腦圖分類如下,熟練使用數(shù)組的你,是否想知道他們內(nèi)部的實現(xiàn)原理呢?接下來小編就帶大家進(jìn)入主題,希望能幫助到你2021-09-09