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