前言
我们知道,
Vue
项目实现双向绑定很轻松,但在小程序项目中却不能如此简单的实现。
在微信小程序中,需要借助 input
组件的 bindinput
属性,每次输入值触发函数更新来完成。
实现
input 组件官方文档:https://developers.weixin.qq.com/miniprogram/dev/component/input.html
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
})
}
})