微信小程序 數(shù)據(jù)綁定及運(yùn)算的簡(jiǎn)單實(shí)例
更新時(shí)間：2017年09月20日 16:01:21 投稿：lqh
這篇文章主要介紹了微信小程序 數(shù)據(jù)綁定的簡(jiǎn)單實(shí)例的相關(guān)資料,希望通過(guò)本文能幫助到大家，需要的朋友可以參考下
微信小程序 數(shù)據(jù)綁定的簡(jiǎn)單實(shí)例
簡(jiǎn)單用法：
Page({
data: {
message: '張三'
}
})
/**
* 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載
*/
onLoad: function (options) {
var content1={
date: "2020年 10月 8日 ",
title："時(shí)間群" ,
nameData:{
name1:"張三李四",
name2:"人五人六"，
},
fade：true/false
}
this.setData(content);
},
數(shù)據(jù)綁定使用 Mustache 語(yǔ)法（雙大括號(hào)）將變量包起來(lái)獲取
<view> {{ date}} </view>
<view> {{ title}} </view>
<view> {{ nameData.name1}} </view>
<view> {{ nameData.name2}} </view>//層級(jí)用點(diǎn)取值
<image wx:if="{{fade}}" class="image" src=""></image>//隱藏/顯示
可以在 {{}} 內(nèi)進(jìn)行簡(jiǎn)單的運(yùn)算
三元運(yùn)算符
<view hidden="{{flag ? true : false}}"> Hidden </view>
計(jì)算
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)成新的對(duì)象或者數(shù)組。
Page({
data: {
zero: 0
}
})
<view wx:for="{{[zero, 1, 2, 3, 4]}}"> {{item}} </view>
輸出結(jié)果：組合成數(shù)組[0, 1, 2, 3, 4]。
對(duì)象
Page({
data: {
a: 1,
b: 2
}
})
<template is="objectCombine" data="{{for: a, bar: b}}"></template>
最終組合成的對(duì)象是 {for: 1, bar: 2}
如有疑問(wèn)請(qǐng)留言或者到本站社區(qū)交流討論，感謝閱讀，希望能幫助到大家，謝謝大家對(duì)本站的支持！
相關(guān)文章
這篇文章主要為大家介紹了2023年了該了解下WebComponent使用教程，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
umi插件開(kāi)發(fā)仿dumi項(xiàng)目實(shí)現(xiàn)基礎(chǔ)路由解析
這篇文章主要為大家介紹了umi插件開(kāi)發(fā)仿dumi項(xiàng)目實(shí)現(xiàn)基礎(chǔ)路由解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
JavaScript?腳本實(shí)現(xiàn)復(fù)雜的查詢改寫示例
這篇文章主要為大家介紹了JavaScript?腳本實(shí)現(xiàn)復(fù)雜的查詢改寫示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
JavaScript 實(shí)現(xiàn)點(diǎn)擊關(guān)閉全屏示例詳解
這篇文章主要為大家介紹了JavaScript 實(shí)現(xiàn)點(diǎn)擊關(guān)閉全屏示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
Proxy的不可變數(shù)據(jù)優(yōu)點(diǎn)及使用詳解
這篇文章主要為大家介紹了Proxy的不可變數(shù)據(jù)優(yōu)點(diǎn)及使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
微信小程序 swiper制作tab切換實(shí)現(xiàn)附源碼
這篇文章主要介紹了微信小程序 swiper制作tab切換實(shí)現(xiàn)代碼的相關(guān)資料,需要的朋友可以參考下2017-01-01
強(qiáng)制設(shè)為首頁(yè)代碼...2006-06-06
微信小程序 input表單與redio及下拉列表的使用實(shí)例
這篇文章主要介紹了微信小程序 input表單與redio及下拉列表的使用實(shí)例的相關(guān)資料,希望通過(guò)本文能幫助到大家，需要的朋友可以參考下2017-09-09
這篇文章主要介紹了微信小程序scroll-view組件詳細(xì)介紹的相關(guān)資料,需要的朋友可以參考下2016-09-09
gulp-font-spider實(shí)現(xiàn)中文字體包壓縮實(shí)踐
這篇文章主要為大家介紹了gulp-font-spider實(shí)現(xiàn)中文字體包壓縮實(shí)踐詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03