小程序|微信小程序双向数据绑定小程序|js

单向绑定语法

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

例子：

解析：

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

双向绑定解决方案：

文章图片

利用bindinput记录下input框中每次输入的值。
【小程序|微信小程序双向数据绑定】wxml代码：

js代码：

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

解决思路：利用小程序中的bindinput方法，记录每次输入的值，并将值暂时存入一个全局变量中。再利用bindblur记录下Input框每次失去焦点时的最终值，并赋值给data中。

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

数据：{{ message }}

js：

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

极简版（有局限性慎用，后面会提到）
对应属性前加入model:前缀：