小程序input數(shù)據(jù)雙向綁定實(shí)現(xiàn)方法
更新時(shí)間：2019年10月17日 10:19:32 作者：KyleBing
這篇文章主要介紹了小程序input數(shù)據(jù)雙向綁定實(shí)現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
我們都知道 vue 中可以使用 modal 來實(shí)現(xiàn) input 內(nèi)容數(shù)據(jù)的雙向綁定。
小程序好像沒有提供相應(yīng)的方法支持，就需要我們自己寫了。
原理
很簡單，在 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
},
handleInputChange: function(e){
// 取出定義的變量名
let targetData = e.currentTarget.dataset.modal;
// 取出定義的變量名
let currentValue = e.detail.value;
// 將 input 值賦值給 定義的變量名，this.name 可以直接取到在 data 中定義的 name 值，其效果跟 this[變量名] 是對等的，這是 js 基礎(chǔ)
this[targetData] = currentValue;
}
}
效果如下圖：
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
微信小程序購物車、父子組件傳值及calc的注意事項(xiàng)總結(jié)
這篇文章主要給大家介紹了關(guān)于微信小程序購物車、父子組件傳值及calc的注意事項(xiàng)的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-11-11
JavaScript之事件委托實(shí)例(附原生js和jQuery代碼)
下面小編就為大家?guī)硪黄狫avaScript之事件委托實(shí)例(附原生js和jQuery代碼)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07
關(guān)于javascript中限定時(shí)間內(nèi)防止按鈕重復(fù)點(diǎn)擊的思路詳解
下面小編就為大家?guī)硪黄P(guān)于javascript中限定時(shí)間內(nèi)防止按鈕重復(fù)點(diǎn)擊的思路詳解。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-08-08
上午在做一些測試.把頁面拿到火狐上去就出現(xiàn)一堆問題.頁面布局先不說.Javascript代碼的問題就夠頭疼2009-05-05
ReactHooks+ts(函數(shù)組件)實(shí)現(xiàn)原生輪播的示例
這篇文章主要介紹了ReactHooks+ts函數(shù)組件實(shí)現(xiàn)原生輪播，在這里下載依賴第一個(gè)是js依賴第二個(gè)是ts依賴，通過實(shí)例代碼介紹了創(chuàng)建tsx文件的方法,需要的朋友可以參考下2022-05-05
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)分頁查詢列表的模板，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-08-08
這篇文章主要介紹了JS實(shí)現(xiàn)的RC4加密算法,結(jié)合實(shí)例形式分析基于javascript實(shí)現(xiàn)的RC4加密算法簡單定義與使用方法,需要的朋友可以參考下2018-08-08
關(guān)于這個(gè)實(shí)現(xiàn)div拖動(dòng)的js函數(shù)，實(shí)際上也是某位前輩公布于網(wǎng)上，這兒只是摘抄注解一下。2009-06-06
這里介紹的是網(wǎng)上比較流行的刷新頁面的代碼，整理的相對比較全了，這些知識(shí)都是前后臺(tái)結(jié)合過程中，經(jīng)常用的到的。2010-04-04
這篇文章主要介紹了js檢測數(shù)組類型的方法小結(jié),有instanceof方法Array.isArray() 方法和Object.prototype.toString.call()方法，都是比較常用的，需要的朋友可以參考下2017-03-03