在微信小程序的规则中,input标签中的数据为单向绑定,无法像Vue框架中的v-model直接进行input的双向绑定。

下面有一种思路来解决双向绑定这个思路。

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: null
 4   }, 
 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方法,记录每次输入的值,并将值暂时存入一个全局变量中。 再利用bindblur记录下Input框每次失去焦点时的最终值,并赋值给data中。

注:为了优化小程序运载速度,尽量减少setData方法的使用。 所以讲setData单独提出,并在Input框失去焦点时再进行传值。

 

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

Logo

前往低代码交流专区

更多推荐