微信小程序中WXML模版語(yǔ)法-數(shù)據(jù)綁定方法介紹
1.數(shù)據(jù)綁定的基本原則
1>在data中定義數(shù)據(jù)
2>在WXML中使用數(shù)據(jù)
2.在data中定義頁(yè)面的數(shù)據(jù)
在頁(yè)面對(duì)應(yīng)的.js文件中,把數(shù)據(jù)定義到data對(duì)象中即可:
page({
data:{
info:'init data'
}
})
3.Mustache語(yǔ)法的格式
把data中的數(shù)據(jù)綁定到頁(yè)面中渲染,使用Mustache語(yǔ)法(雙大括號(hào))將變量包起來(lái)即可。語(yǔ)法格式為:
<view>{{info}}</view>//雙括號(hào)中放入你想導(dǎo)入的數(shù)據(jù)
4.Mustache語(yǔ)法的應(yīng)用場(chǎng)景
Mustache語(yǔ)法的主要應(yīng)用場(chǎng)景為:
1>綁定內(nèi)容
2>綁定屬性
3>運(yùn)算(三元運(yùn)算、算術(shù)運(yùn)算等)
5.動(dòng)態(tài)綁定屬性
頁(yè)面的數(shù)據(jù)如下:
page({
data:{
imgSrc:'www.demo.com'
}
})
頁(yè)面的結(jié)構(gòu)如下:
<image src="{{imgSrc}}"></image>
6.三元運(yùn)算
頁(yè)面的數(shù)據(jù)如下:
page({
data:{
randomNum:Math.random()*10 //生成10以內(nèi)的隨機(jī)數(shù)
}
})
頁(yè)面的結(jié)構(gòu)如下:
<view>{{ randomNum >= 5 ? '隨機(jī)數(shù)字大于等于5' : '隨機(jī)數(shù)字小于等于 5'}}</view>
7.算術(shù)運(yùn)算
讓頁(yè)面的數(shù)據(jù)如下:文章來(lái)源:http://www.zghlxwxcb.cn/news/detail-658024.html
page({
data:{
randomNum:Math.random().toFixed(2) //生成一個(gè)帶兩位小數(shù)的隨機(jī)數(shù),例如 0.34
}
})
頁(yè)面的結(jié)構(gòu)如下:文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-658024.html
<view>生成100以內(nèi)的隨機(jī)數(shù):{{ randomNum * 100}}</view>
到了這里,關(guān)于微信小程序中WXML模版語(yǔ)法-數(shù)據(jù)綁定方法介紹的文章就介紹完了。如果您還想了解更多內(nèi)容,請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!