小程序 input 數據雙向綁定，實現方法之一

小程序 input 數據雙向綁定，實現方法之一

咱們都知道 vue 中能夠使用 modal 來實現 input 內容數據的雙向綁定。

小程序好像沒有提供相應的方法支持，就須要咱們本身寫了。

原理

很簡單，在 input 上先綁定須要取值的變量，如這個變量名是 name，而後再定義一個用於指向變量名的屬性 data-modal 這個屬性值設置爲 name，在 input 的綁定方法中將這個屬性值取出，就會知道這個 input 綁定了哪一個變量，而後再將 input 的當前值賦給這個變量便可。

實現

wxml

<input id='name' 
    name="name"
    type='text' 
    value='{{name}}'  <!-- input 從 js 中的 data.name 取值 -->
    data-modal='name'  <!-- 這裏經過 data-xx 的形式傳遞一個須要綁定的變量名，以後能夠經過 event.dataset.xxx 輕鬆取到 -->
    bindinput='handleInputChange' <!-- 這裏綁定 input 內容變化時的處理方法 -->
    >
</input>

wxs

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

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

        // 定義一個鍵值對
        let dataMap = {};

        // 設置這個鍵值對的鍵和值
        dataMap[name] = value;

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

        // 這裏用於測試
        console.log(name, ':', this.data[name]) // 顯示 page 內 data 的實際數據
    }
}

效果以下圖：