微信小程序 數(shù)據(jù)綁定及運算的簡單實例
微信小程序 數(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)進行簡單的運算
三元運算符
<view hidden="{{flag ? true : false}}"> Hidden </view>
計算
Page({
data: {
a: 1,
b: 2,
c: 3
}
})
<view> {{a + b}} + {{c}} + d </view>
輸出結果:3 + 3 + d。
邏輯判斷
<view wx:if="{{length > 5}}"> </view>
也可以在 Mustache 內(nèi)直接進行組合,構成新的對象或者數(shù)組。
Page({
data: {
zero: 0
}
})
<view wx:for="{{[zero, 1, 2, 3, 4]}}"> {{item}} </view>
輸出結果:組合成數(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ū)交流討論,感謝閱讀,希望能幫助到大家,謝謝大家對本站的支持!
相關文章
umi插件開發(fā)仿dumi項目實現(xiàn)基礎路由解析
這篇文章主要為大家介紹了umi插件開發(fā)仿dumi項目實現(xiàn)基礎路由解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-01-01
JavaScript?腳本實現(xiàn)復雜的查詢改寫示例
這篇文章主要為大家介紹了JavaScript?腳本實現(xiàn)復雜的查詢改寫示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-07-07
Proxy的不可變數(shù)據(jù)優(yōu)點及使用詳解
這篇文章主要為大家介紹了Proxy的不可變數(shù)據(jù)優(yōu)點及使用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-03-03
微信小程序 swiper制作tab切換實現(xiàn)附源碼
這篇文章主要介紹了微信小程序 swiper制作tab切換實現(xiàn)代碼的相關資料,需要的朋友可以參考下2017-01-01
gulp-font-spider實現(xiàn)中文字體包壓縮實踐
這篇文章主要為大家介紹了gulp-font-spider實現(xiàn)中文字體包壓縮實踐詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-03-03

