欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

微信小程序?qū)崿F(xiàn)事件傳參與數(shù)據(jù)同步流程詳解

 更新時間：2022年10月09日 10:07:54   作者：honker707  
這篇文章主要介紹了微信小程序開發(fā)中實現(xiàn)事件傳參與數(shù)據(jù)同步的詳細流程，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧

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

通過調(diào)用this.setData(dataObject)方法，可以給頁面data中的數(shù)據(jù)重新賦值，示例如下：

hacker.wxml

<button type="primary" bindtap="CountChange">+1 按鈕</button>

hacker.js

Page({
    data:{
        count:0
    },
   // +1按鈕的點擊事件處理函數(shù)
   CountChange(){
       this.setData({
           count:this.data.count + 1
       })
   }
})

事件傳參

小程序中的事件傳參比較特殊，不能在綁定事件的同時為事件處理函數(shù)傳遞參數(shù)，例如，下面的代碼不能正常運行：

<button type="primary" bindtap='btnHandler(123456)'>事件傳參</button>

因為小程序會把bindtap的屬性值統(tǒng)一當(dāng)做事件名稱來處理，相當(dāng)于調(diào)用一個名稱為btnHandler(123456)的事件處理函數(shù)。

可以為組件提供data-自定義屬性傳參，其中代表的是參數(shù)的名字，示例如下：

info：參數(shù)名字

2：參數(shù)值

<button type="primary" bindtap="btnHandler" data-info="{<!--{cke_protected}{C}%3C!%2D%2D%20%2D%2D%3E-->{2}}">事件傳參</button>

在事件處理函數(shù)中，通過event.target.dataset.參數(shù)名即可獲取具體的參數(shù)值，示例代碼如下：

 btnHandler(event){
        // dataset是一個對象，包含所有通過data-*傳來的參數(shù)項
        console.log(event.target.dataset)
        // 通過dataset可以訪問具體的參數(shù)值
        console.log(event.target.dataset.info)
    },

代碼如下：

hacker.js

Page({
    data:{
        count:0
    },
    btnHandler(e){
        this.setData({
            count:this.data.count + e.target.dataset.info
        })
    },
})

hacker.wxml

<button type="primary" bindtap="btnHandler" data-info="{<!--{cke_protected}{C}%3C!%2D%2D%20%2D%2D%3E-->{2}}">+2按鈕</button>

運行結(jié)果如下：

bindinput的語法格式

在小程序中，通過input事件來響應(yīng)文本框的輸入事件，語法格式如下：

①通過bindinput，可以為文本框綁定輸入事件

<input bindinput="inputHandler"></input>

②在頁面的.js文件中定義事件處理函數(shù)

Page({
    inputHandler(e){
        // e.detail.value 是變化過后，文本框的最新值
        console.log(e.detail.value)
    }
})

運行結(jié)果如下：

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

實現(xiàn)步驟

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

Page({
    data:{
        msg:'你好,'
    }, 
})

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

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

③美化格式

input{
    border:1px solid #eee;
    padding:5px;
    margin:5px;
    border-radius:3px;
}

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

iptHandler(e){
        this.setData({
            // 通過e.detail.value 獲取文本框最新值
            msg:e.detail.value
        })
    }

運行結(jié)果如下：

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

相關(guān)文章

最新評論