數(shù)據(jù)綁定

基本原則

• 在data中定義數(shù)據(jù)
• 在WXML中使用數(shù)據(jù)

在data中定義數(shù)據(jù)

在頁(yè)面對(duì)應(yīng)的.js 文件中，把數(shù)據(jù)定義到data對(duì)象中即可。

Mustache語(yǔ)法

把data中的數(shù)據(jù)綁定到頁(yè)面中渲染，使用 Mustache語(yǔ)法（雙大括號(hào)) 將變量包起來(lái)即可。

語(yǔ)法:<view>{{定義的數(shù)據(jù)名稱}}</view>

Mustache語(yǔ)法的應(yīng)用

綁定內(nèi)容

綁定內(nèi)容即為文本的綁定，就如上述例子中將一個(gè)字符串綁定到view的文本節(jié)點(diǎn)中。

綁定屬性

綁定屬性即將一個(gè)數(shù)據(jù)綁定在一個(gè)標(biāo)簽的屬性節(jié)點(diǎn)中。

如：在頁(yè)面js文件的data中添加一個(gè)src數(shù)據(jù)。

在頁(yè)面wxml文件中使用Mustache語(yǔ)法將其綁定在image標(biāo)簽的屬性節(jié)點(diǎn)中。

運(yùn)算（三元運(yùn)算、算術(shù)運(yùn)算等)

在小程序的編譯中也可以進(jìn)行運(yùn)算操作。

三元運(yùn)算

如：

在頁(yè)面js文件中添加data數(shù)據(jù)。

在頁(yè)面.wxml中綁定該數(shù)據(jù)，并進(jìn)行判斷.

算數(shù)運(yùn)算

如：

在頁(yè)面js文件中的data中添加數(shù)據(jù)。

在頁(yè)面wxml中進(jìn)行數(shù)據(jù)綁定，并進(jìn)行計(jì)算。

事件綁定

什么是事件？

事件是渲染層到邏輯層的通訊方式。通過(guò)事件可以將用戶在渲染層產(chǎn)生的行為，反饋到邏輯層進(jìn)行業(yè)務(wù)的處理。與html類似，相當(dāng)于用戶與小程序的交互。

常用事件

事件對(duì)象屬性

當(dāng)事件回調(diào)觸發(fā)的時(shí)候，會(huì)收到一個(gè)事件對(duì)象event(與js中的事件對(duì)象類似)，它的詳細(xì)屬性如下表所示:

target與currentTarget的區(qū)別

event.target返回的是觸發(fā)該事件的源頭組件，而currentTarget則返回的是當(dāng)前事件所綁定的源頭組件。

如：

給view綁定了單擊事件，在該事件下有一個(gè)按鈕組件，當(dāng)我們單擊按鈕時(shí)，event.target返回的就是這個(gè)按鈕組件。而event.currentTarget返回的就是view這個(gè)綁定事件的源頭組件。因此，常用到的是target屬性而非currentTarget屬性。

bindtap語(yǔ)法格式

在小程序中，不存在HTML中的onclick鼠標(biāo)點(diǎn)擊事件，而是通過(guò)tap事件來(lái)響應(yīng)用戶的觸摸行為。

通過(guò)bindtap給組件綁定tap觸摸事件。

如下圖所示：

在頁(yè)面wxml文件中綁定觸摸事件

在頁(yè)面js中定義相應(yīng)的事件處理函數(shù)，事件屬性通過(guò)傳入一個(gè)形參來(lái)接收。通常為event。

當(dāng)點(diǎn)擊按鈕時(shí)，控制臺(tái)便會(huì)輸出。

在事件處理函數(shù)中為data賦值

使用this.setData()方法可以修改data中的數(shù)據(jù)。

在data中定義數(shù)據(jù)。

為事件響應(yīng)函數(shù)添加this.setData方法，并修改其數(shù)值。

在wxml文件中綁定數(shù)據(jù)

實(shí)現(xiàn)效果：

事件傳參

小程序中的事件傳參比較特殊，不能在綁定事件的同時(shí)為事件處理函數(shù)傳遞參數(shù)。如：

<button type="primary" bindtap="butnTap(3)">點(diǎn)擊按鈕+3</button>

這里并不能為butnTap事件函數(shù)傳遞參數(shù)，而是將butnTap(3)作為事件函數(shù)名。

為事件傳遞參數(shù)時(shí)，使用data-參數(shù)名="{{參數(shù)值}"}來(lái)傳遞參數(shù)。如：

<button type="primary" bindtap="butntTap" data-num="{{3}}">點(diǎn)擊按鈕+3</button>

查看參數(shù)

通過(guò)event.target.dataset.參數(shù)名可查看我們?cè)O(shè)置的參數(shù)。

通過(guò)該參數(shù)也可修改data中的數(shù)值。

此時(shí)點(diǎn)擊按鈕就自增加3

bindinput語(yǔ)法格式

通過(guò)bindinput，可以為文本框綁定輸入事件

<input bindinput="inputBd" ></input>

在頁(yè)面js文件中定義事件處理函數(shù)。通過(guò)even.detail.value來(lái)獲取文本框中的內(nèi)容。

實(shí)現(xiàn)文本框與data之間的數(shù)據(jù)同步

實(shí)現(xiàn)步驟:

定義數(shù)據(jù)

在頁(yè)面js文件中定義文本數(shù)據(jù)

渲染結(jié)構(gòu)

設(shè)置value默認(rèn)值。

<input bindinput="inputBd" value="{<!--{cke_protected}{C}%3C!%2D%2D%20%2D%2D%3E-->{text}}"></input>

美化樣式

將文本框美化一下

input{
    border: 1px solid blue;
    border-radius: 5px;
}

綁定input 事件處理函數(shù)

 inputBd(event){
      // console.log(event.detail.value);
      this.setData({
          text:event.detail.value
      })
  }

輸入文本，此時(shí)data中的text也隨之改變。

到這里本節(jié)內(nèi)容就結(jié)束啦，下期帶大家了解微信小程序中的條件渲染和列表渲染。

總結(jié)

到此這篇關(guān)于微信小程序數(shù)據(jù)綁定、事件綁定以及事件傳參、數(shù)據(jù)同步的文章就介紹到這了,更多相關(guān)小程序數(shù)據(jù)、事件綁定及事件傳參、數(shù)據(jù)同步內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論