微信小程序實戰(zhàn)系列教材：
1.微信小程序實戰(zhàn)開發(fā)（一）：微信小程序簡介
2.微信小程序實戰(zhàn)開發(fā)（二）：小程序基本目錄結構講解
3.微信小程序實戰(zhàn)開發(fā)（三）：小程序視圖容器（view container）
4.微信小程序實戰(zhàn)開發(fā)（四）：組件的基本使用講解
今天要給大家介紹的是小程序的數(shù)據(jù)綁定，今天的內容緊接著微信小程序實戰(zhàn)開發(fā)（四）：組件的基本使用講解的內容講解，不清楚的同學可以自行復習。
上節(jié)課我們有講到text組件，上節(jié)課的舉例如下：
1.微信小程序實戰(zhàn)開發(fā)（一）：微信小程序簡介
2.微信小程序實戰(zhàn)開發(fā)（二）：小程序基本目錄結構講解
3.微信小程序實戰(zhàn)開發(fā)（三）：小程序視圖容器（view container）
4.微信小程序實戰(zhàn)開發(fā)（四）：組件的基本使用講解
今天要給大家介紹的是小程序的數(shù)據(jù)綁定，今天的內容緊接著微信小程序實戰(zhàn)開發(fā)（四）：組件的基本使用講解的內容講解，不清楚的同學可以自行復習。
上節(jié)課我們有講到text組件，上節(jié)課的舉例如下：
案例一：如果我們想動態(tài)的顯示text文本里面的內容，就需要用到數(shù)據(jù)的綁定，數(shù)據(jù)綁定使用 Mustache 語法（雙大括號）將變量包起來，以{{TEXT}}來標識的。如下用例：
51小程序demo
<button type="default" hover-class="other-button-hover"> default </button>
<button type="primary" > primary </button>
<text>{{text}}</text>
我們編譯時就會看不到文本內容，此時我們需要到newvip.js里面的data里面定義text的值
data:{
text:"這是www.html51.com的內容"
},
編譯后顯示的結果如下：
案例二：如果我們想通過數(shù)據(jù)綁定的方式來顯示按鈕上的內容，應該如何實現(xiàn)呢。（上述用例上按鈕的文字是primary）
同樣的方法，在js頁面：
同樣的方法，在js頁面：
<blockquote> data:{
在wxml頁面上使用數(shù)據(jù)綁定如下：
51小程序demo
<button type="default" hover-class="other-button-hover"> default </button>
<button type="primary" > {{btnText}} </button>
<text>{{text}}</text>
編譯后顯示的結果就如下圖所示：
3，數(shù)據(jù)綁定的使用方法就如上所述，那如果動態(tài)更改數(shù)據(jù)綁定里面的內容呢？
方法也很簡單，為了演示時能夠查看到數(shù)據(jù)動態(tài)的變化，我們先給按鈕增加一個點擊事件。
3，數(shù)據(jù)綁定的使用方法就如上所述，那如果動態(tài)更改數(shù)據(jù)綁定里面的內容呢？
方法也很簡單，為了演示時能夠查看到數(shù)據(jù)動態(tài)的變化，我們先給按鈕增加一個點擊事件。
<div> btnClick: function() {</div><div> console.log("按鈕被點擊了...")</div><div> }</div>
<button type="primary" bindtap="btnClick" > {{btnText}} </button>
我們編譯時會打印出一個log：按鈕被點擊了...，我們看一下演示效果：
如果我們希望點擊后，text文本內容修改我們需要如何操作呢？很簡單
演示效果如下：
注意：以上操作過程中可能遇到的問題
1.點擊按鈕后沒有指定log打印出來，也沒有錯誤提示。肉眼幾乎看不出哪里有問題，其實是bindtap點擊事件bindtap="btnClick"和>之間多了一個空格！
我們編譯時會打印出一個log：按鈕被點擊了...，我們看一下演示效果：
如果我們希望點擊后，text文本內容修改我們需要如何操作呢？很簡單
- btnClick: function() {
- console.log("按鈕被點擊了了...")
- this.setData({text:"這是新的51小程序內容"})
- }
注意：以上操作過程中可能遇到的問題
1.點擊按鈕后沒有指定log打印出來，也沒有錯誤提示。肉眼幾乎看不出哪里有問題，其實是bindtap點擊事件bindtap="btnClick"和>之間多了一個空格！
<button type="primary" bindtap="btnClick" > {{btnText}} </button>
2.WXML 中的動態(tài)數(shù)據(jù)均來自對應 Page 的 data。
愛盈利（aiyingli.com）移動互聯(lián)網(wǎng)最具影響力的盈利指導網(wǎng)站。定位于服務移動互聯(lián)網(wǎng)創(chuàng)業(yè)者，移動盈利指導。我們的目標是讓盈利目標清晰可見！降低門檻，讓缺乏經(jīng)驗、資金有限的個人和團隊獲得經(jīng)驗和機會，提高熱情，激發(fā)產品。 2.WXML 中的動態(tài)數(shù)據(jù)均來自對應 Page 的 data。
