100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > 微信小程序双向数据绑定

微信小程序双向数据绑定

时间:2024-04-06 13:14:33

相关推荐

微信小程序双向数据绑定

单向绑定语法

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

例子:

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

解析:

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

双向绑定解决方案:

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

wxml代码:

<input type="text" value="{{searchCode}}" bindblur="getSearchValue"bindinput="getSearchInput"></input>

js代码:

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

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

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

wxml:

<!-- 显示双向绑定的数据变动 --><text>数据:{{message }}</text><!-- END --><!-- 用户输入框(实时改变数据) --><!-- 给input框绑定bindinput属性 --><!-- bindinput属性请查阅官方文档 --><inputstyle="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'}}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。