2021-02-22更新
小程序增加了一个简易双向绑定
用法
<input model:value="{{value}}" />
输入时,data中的value也会被相应的改变,
但是用于双向绑定的表达式有如下限制:
- 只能是一个单一字段的绑定,如
<input model:value="值为 {{value}}" />
<input model:value="{{ a + b }}" />
都是非法的;
- 目前,尚不能 data 路径,如
<input model:value="{{ a.b }}" />
这样的表达式目前暂不支持
不支持的只能是使用老方法了:
在vue中,使用v-model可以实现input的双向绑定,但是在小程序中没有"v-model"这种直接的方法,可以用事件实现类似功能:
//wxml
<input placeholder="输入关键字" bindinput="bindKeyInput"></input>
<text>{{ sugData }}</text>
//js
Page({
data: {
sugData:''
},
bindKeyInput: function(e){
this.setData({
sugData:e.detail.value;
})
},
})
利用input的专属事件bindinput
触发bindKeyInput事件,将e.detail.value
用this.setData({})
给出去,这样就实现了类"v-model"操作
所写博客皆为自己的心得,如有错误欢迎指出,侵删,谢谢