小程序 input 數(shù)據(jù)雙向綁定，實(shí)現(xiàn)方法之一

我們都知道 vue 中可以使用 modal 來實(shí)現(xiàn) input 內(nèi)容數(shù)據(jù)的雙向綁定。

小程序好像沒有提供相應(yīng)的方法支持，就需要我們自己寫了。

原理

很簡(jiǎn)單，在 input 上先綁定需要取值的變量，如這個(gè)變量名是 name，然后再定義一個(gè)用于指向變量名的屬性 data-modal 這個(gè)屬性值設(shè)置為 name，在 input 的綁定方法中將這個(gè)屬性值取出，就會(huì)知道這個(gè) input 綁定了哪個(gè)變量，然后再將 input 的當(dāng)前值賦給這個(gè)變量即可。

實(shí)現(xiàn)

wxml

<input id='name' 
    name="name"
    type='text' 
    value='{{name}}'  <!-- input 從 js 中的 data.name 取值 -->
    data-modal='name'  <!-- 這里通過 data-xx 的形式傳遞一個(gè)需要綁定的變量名，之后可以通過 event.dataset.xxx 輕松取到 -->
    bindinput='handleInputChange' <!-- 這里綁定 input 內(nèi)容變化時(shí)的處理方法 -->
    >
</input>

wxs

Page({
    data: {
        name: String
    },
    
    // 處理 input 數(shù)據(jù)雙向綁定
    handleInputChange: function (e) {
        // 取出定義的變量名
        let name = e.currentTarget.dataset.modal;

        // 取出實(shí)時(shí)的變量值
        let value = e.detail.value;

        // 定義一個(gè)鍵值對(duì)
        let dataMap = {};

        // 設(shè)置這個(gè)鍵值對(duì)的鍵和值
        dataMap[name] = value;

        // 刷新數(shù)據(jù)
        this.setData(dataMap);

        // 這里用于測(cè)試
        console.log(name, ':', this.data[name]) // 顯示 page 內(nèi) data 的實(shí)際數(shù)據(jù)
    }
}

效果如下圖：

本頁內(nèi)容由塔燈網(wǎng)絡(luò)科技有限公司通過網(wǎng)絡(luò)收集編輯所得，所有資料僅供用戶學(xué)習(xí)參考，本站不擁有所有權(quán)，如您認(rèn)為本網(wǎng)頁中由涉嫌抄襲的內(nèi)容，請(qǐng)及時(shí)與我們聯(lián)系，并提供相關(guān)證據(jù)，工作人員會(huì)在5工作日內(nèi)聯(lián)系您，一經(jīng)查實(shí)，本站立刻刪除侵權(quán)內(nèi)容。本文鏈接:http://www.webpost.com.cn/25235.html