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

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

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

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

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

hacker.wxml

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

hacker.js

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

事件傳參

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

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

因?yàn)樾〕绦驎?huì)把bindtap的屬性值統(tǒng)一當(dāng)做事件名稱來(lái)處理，相當(dāng)于調(diào)用一個(gè)名稱為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ù)中，通過(guò)event.target.dataset.參數(shù)名即可獲取具體的參數(shù)值，示例代碼如下：

 btnHandler(event){
        // dataset是一個(gè)對(duì)象，包含所有通過(guò)data-*傳來(lái)的參數(shù)項(xiàng)
        console.log(event.target.dataset)
        // 通過(guò)dataset可以訪問(wèn)具體的參數(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>

運(yùn)行結(jié)果如下：

bindinput的語(yǔ)法格式

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

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

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

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

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

運(yùn)行結(jié)果如下：

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

實(shí)現(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({
            // 通過(guò)e.detail.value 獲取文本框最新值
            msg:e.detail.value
        })
    }

運(yùn)行結(jié)果如下：

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

相關(guān)文章

最新評(píng)論