微信小程序双向数据绑定

发布时间:2023-07-29 16:00

单向绑定语法

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

例子:

<input value="{{value}}" />

解析:

如果使用 this.setData({ value: 'leaf' }) 来更新 valuethis.data.value 和输入框的中显示的值都会被更新为leaf;但如果用户修改了输入框里的值,却不会改变 this.data.value

双向绑定解决方案:

微信小程序双向数据绑定_第1张图片

利用bindinput记录下input框中每次输入的值。

wxml代码:

<input type="text" 
 value="{{searchCode}}" 
 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中。

简单版:借助 input 组件的 bindinput 属性,每次输入值触发函数更新来完成

wxml:

<!-- 显示双向绑定的数据变动 -->
<text>数据:{{ message }}</text>
<!-- END -->

<!-- 用户输入框(实时改变数据) -->
<!-- 给input框绑定bindinput属性 -->
<!-- bindinput属性请查阅官方文档 -->
<input
style="border:2px solid red"
type="text"
bindinput="messageChang">
</input>
<!-- END -->

js:

Page({

  /*
  * 事件处理
  */
  data: {
    message: ''//用户输入框数据
  },

  /*
  * 事件处理
  */

  /*
  * 【当用户输入数据时(每当)就会触发函数】
  * 设置了bindinput属性后会返回对象(e)
  * 你也可以先console一下e对象看看是什么
  * 然后通过e对象获取输入框value值
  * 最后setDate实时更新到message上
  */
  messageChang: function(e) {
    
    // 获取输入框当前value值
    let value = e.detail.value

    // 及时更新数据
    this.setData({
      message: value
    })
  }

})

极简版(有局限性慎用,后面会提到

对应属性前加入model:前缀:

<input model:value="{{value}}" />

用户输入的同时改变 this.data.value

局限性:

与vue相比,暂不支持表达式形式,如下

<input model:value="{{ a.b }}" />
data: {
   a:{b:'hello'}
    }

ItVuer - 免责声明 - 关于我们 - 联系我们

本网站信息来源于互联网,如有侵权请联系:561261067@qq.com

桂ICP备16001015号