微信小程序双向绑定
欢迎加入前端交流群交流知识获取视频资料:749539640
vue、angular的双向绑定如下示例:
<div>
<input type="text" [(ngModel)]="name">
{{name}}
</div>
你不需要多余的操作就可以实现这么简单的双向绑定,但是在小程序里就不是这么玩的了
<view>
<input bindinput="bindName" value='{{name}}'></input>
{{name}}
</view>
bindName(e) {
//方法一
this.data.name = e.detail.value;
this.setData({
name: this.data.name
})
//方法二
this.setData({
name: e.detail.value
})
}
说一下方法一和方法二的区别:
方法一:第一步先赋值,值发生了变化,但是这个时候页面不会渲染为新数据,你需要调用setData才能刷新页面视图!
方法二:赋值并刷新视图