在微信小程序的規(guī)則中，input標(biāo)簽中的數(shù)據(jù)為單向綁定，無法像Vue框架中的v-model直接進(jìn)行input的雙向綁定。

下面有一種思路來解決雙向綁定這個(gè)思路。

1、利用bindinput記錄下input框中每次輸入的值。

wxml代碼：

<input type="text" value="{{searchCode}}" confirm-type="search" bindconfirm="getSearchResult" bindblur="getSearchValue" bindinput="getSearchInput"></input>

js代碼：

1 Page({2 data: {3 searchCode: null4 }, 5 getSearchInput(e) {6 this.searchCode = e.detail.value;7 },8 getSearchValue() {9 this.getSaveSearchValue('searchCode', this.searchCode) 10 }, 11 // 存值入棧 12 getSaveSearchValue(name, value) { 13 var data = {}; 14 data[name] = value; 15 this.setData(data) 16 }, 17 })

解決思路為，利用小程序中的bindinput方法，記錄每次輸入的值，并將值暫時(shí)存入一個(gè)全局變量中。 再利用bindblur記錄下Input框每次失去焦點(diǎn)時(shí)的最終值，并賦值給data中。

注：為了優(yōu)化小程序運(yùn)載速度，盡量減少setData方法的使用。 所以講setData單獨(dú)提出，并在Input框失去焦點(diǎn)時(shí)再進(jìn)行傳值。

?

原文地址：https://www.cnblogs.com/moxiaoshang/p/11713767.html

總結(jié)

以上是生活随笔為你收集整理的微信小程序 input框进行双向绑定的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。