前言
對(duì)于目前形式，微信小程序是一個(gè)熱門，那么我們?cè)撊绾稳W(xué)習(xí)并且掌握之后去做實(shí)際項(xiàng)目呢？
為此我特意開(kāi)設(shè)此專欄，在我學(xué)習(xí)的同時(shí)也將其分享給大家！
本篇文章主要介紹數(shù)據(jù)綁定這一名詞，那么我們?nèi)绾卧谛〕绦蝽?yè)面定義數(shù)據(jù)并且使用呢？
首先我們介紹一下數(shù)據(jù)綁定遵守的基本原則：
1. 在 date 里面定義數(shù)據(jù)
2. 在 wxml 里面使用數(shù)據(jù)
如果在往下閱讀的過(guò)程中，有什么錯(cuò)誤的地方，期待大家的指點(diǎn)！
一、定義數(shù)據(jù)
請(qǐng)諸君打開(kāi)微信開(kāi)發(fā)者工具，接下里跟著我一步一步操作！
聲明：我們數(shù)據(jù)的定義以及使用需要區(qū)分位置，比如我們每個(gè)頁(yè)面都有自己的對(duì)于數(shù)據(jù)，如果我們想要在特定頁(yè)面使用數(shù)據(jù)，我們需要在指定頁(yè)面內(nèi)部進(jìn)行。
定義數(shù)據(jù)的位置在頁(yè)面對(duì)應(yīng)的 .js 文件內(nèi)，將數(shù)據(jù)放在 data 對(duì)象中即可。（接下來(lái)博主選用的是之前的 list 頁(yè)面）
-
打開(kāi) .js ，在里面找到 data ，在里面定義一個(gè)數(shù)據(jù)，格式如下
Page({ /** * 頁(yè)面的初始數(shù)據(jù) */ data: { xdl: '跟著一碗黃豆醬學(xué)習(xí)微信小程序！' }, /** * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載 */ onLoad(options) { }, /** * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面初次渲染完成 */ onReady() { }, /** * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面顯示 */ onShow() { }, /** * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面隱藏 */ onHide() { }, /** * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面卸載 */ onUnload() { }, /** * 頁(yè)面相關(guān)事件處理函數(shù)--監(jiān)聽(tīng)用戶下拉動(dòng)作 */ onPullDownRefresh() { }, /** * 頁(yè)面上拉觸底事件的處理函數(shù) */ onReachBottom() { }, /** * 用戶點(diǎn)擊右上角分享 */ onShareAppMessage() { } })page 組件是初始化生成的，我們只需要關(guān)注上面代碼的 data ，在代碼開(kāi)頭。結(jié)構(gòu)就是 名稱 ： ‘內(nèi)容’
二、綁定數(shù)據(jù)
我們前面已經(jīng)定義了數(shù)據(jù)，那么我們?nèi)绾问褂媚?？首先我們介紹一下一個(gè)語(yǔ)法 — Mustache 語(yǔ)法（雙大括號(hào)）
2.1 Mustache 語(yǔ)法
Mustache 語(yǔ)法都能用來(lái)干啥呢？主要三個(gè)作用
- 動(dòng)態(tài)綁定內(nèi)容
- 動(dòng)態(tài)綁定屬性
- 三元運(yùn)算
2.1.1 動(dòng)態(tài)綁定內(nèi)容
我們既然已經(jīng)定義了數(shù)據(jù)，那么如何調(diào)用呢？（動(dòng)態(tài)綁定）
<view> {{ 需要綁定的數(shù)據(jù)名稱 }} </view>
我們只需要在 .wxml 內(nèi)使用 Mustache 語(yǔ)法（雙大括號(hào)）即可引入我們?cè)?.js 內(nèi)定義的數(shù)據(jù)，如上面代碼所示格式
2.1.2 動(dòng)態(tài)綁定屬性
在我們使用一些組件的時(shí)候需要設(shè)置相應(yīng)屬性值才能產(chǎn)生作用，比如我們的 image 組件就需要 src 屬性值，從而告訴我們 image 組件我們的圖片的位置。那么我們的 Mustache 是如何綁定屬性的呢？
data: {
xdl: '跟著一碗黃豆醬學(xué)習(xí)微信小程序！',
picsrc:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fqimg.hxnews.com%2F2018%2F1114%2F1542153705958.jpg&refer=http%3A%2F%2Fqimg.hxnews.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1667625105&t=96c03a127d2f0443361ae749461bb2cd'
},
定義數(shù)據(jù)的格式和上面一致，我們?cè)诖司鸵?image 的 src 屬性為例，我們創(chuàng)建一個(gè) picsrc ，在里面存放我們圖片的路徑。接下來(lái)我們進(jìn)去 list.wxml 里面進(jìn)行綁定屬性操作。
<!--pages/list/list.wxml-->
<view> {{ xdl }} </view>
<image src="{{ picsrc}}"></image>
綁定方式就是將原本要填寫屬性值的地方改成了前面定義的數(shù)據(jù)名稱而已，但是必須使用 Mustache 語(yǔ)法?。p括號(hào)）
效果展示：
2.1.3 三元運(yùn)算
三元運(yùn)算符是軟件編程中的一個(gè)固定格式，語(yǔ)法是“條件表達(dá)式?表達(dá)式1:表達(dá)式2”。使用這個(gè)算法可以使調(diào)用數(shù)據(jù)時(shí)逐級(jí)篩選。接下來(lái)博主將帶大家體會(huì)一下三元運(yùn)算。
data: {
xdl: '跟著一碗黃豆醬學(xué)習(xí)微信小程序！',
picsrc:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fqimg.hxnews.com%2F2018%2F1114%2F1542153705958.jpg&refer=http%3A%2F%2Fqimg.hxnews.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1667625105&t=96c03a127d2f0443361ae749461bb2cd',
a: '3'
},
首先我們?cè)?list.js 內(nèi)的 data 內(nèi)定義一個(gè)數(shù)據(jù) a ，他的數(shù)值為 3
<!--pages/list/list.wxml-->
<view> {{ xdl }} </view>
<image src="{{ picsrc}}"></image>
<view> {{ a >=1 ? 'YES' :'NO'}}</view>
然后在 list.wxml 內(nèi)我們使用 Mustache 語(yǔ)法，綁定上數(shù)據(jù) a，然后進(jìn)行 >= 1的判斷，如果 a 大于等于1，將顯示 YES，反之顯示NO
效果展示
2.2 Mustache 語(yǔ)法的綜合使用
那么接下來(lái)我將帶領(lǐng)大家手把手的進(jìn)行操作
-
打開(kāi) list.js ，定義一個(gè)變量 random
data: { random:(Math.random()*10)+2, }, -
打開(kāi)對(duì)應(yīng)頁(yè)面的 .wxml，利用 Mustache 語(yǔ)法嵌入數(shù)據(jù)進(jìn)行 random 和 5 進(jìn)行比較輸出
<view>{{ random >=5 ? 'a的數(shù)值真的大于等于2喲！':'a的數(shù)值小于等于2捏！'}}</view> -
效果展示
2.3 數(shù)據(jù)查看
我相信大家肯定有個(gè)疑問(wèn)，那就是我們咋知道這個(gè)生成的隨機(jī)數(shù)到底是多少？接下來(lái)我就來(lái)告訴大家如何查看數(shù)據(jù)。
-
點(diǎn)擊調(diào)試器內(nèi)的 appdata
-
在數(shù)據(jù)框內(nèi)即可查看我們所有定義的數(shù)據(jù)
三、數(shù)據(jù)運(yùn)算
我們前面講的 Mustache 語(yǔ)法也可以進(jìn)行算術(shù)運(yùn)算，接下來(lái)博主帶大家一起來(lái)操作一下
3.1 位數(shù)限制（toFixed）
我們接下里定義兩組數(shù)據(jù)，一組不設(shè)置位數(shù)，一組設(shè)置位數(shù)為3
-
定義數(shù)據(jù)
data: { random:(Math.random()*10)+2 , random2:Math.random().toFixed(3) }, -
數(shù)據(jù)觀察
我們可以看到設(shè)置位數(shù)的數(shù)據(jù) random2 以及變成三位數(shù)
3.2 算數(shù)運(yùn)算
接下里我們進(jìn)行簡(jiǎn)單的算數(shù)運(yùn)算展示
-
利用之前創(chuàng)建的 random2 進(jìn)行算數(shù)運(yùn)算（*1000）
<view>{{ random2*1000 }}</view> -
數(shù)據(jù)展示
-
效果展示
總結(jié)
大家每天都要開(kāi)開(kāi)心心的喔，讓我們一起快樂(lè)的學(xué)習(xí)吧！文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-483814.html
文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-483814.html
到了這里，關(guān)于【微信小程序入門到精通】— 帶你揭開(kāi)數(shù)據(jù)綁定的真面目的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
