微信小程序 input框进行双向绑定
在微信小程序的规则中,input标签中的数据为单向绑定,无法像Vue框架中的v-model直接进行input的双向绑定。下面有一种思路来解决双向绑定这个思路。1、利用bindinput记录下input框中每次输入的值。wxml代码:<input type="text" value="{{searchCode}}" confirm-type="search" bindconfirm="getS
·
在微信小程序的规则中,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
更多推荐
已为社区贡献3条内容
所有评论(0)