在小程序开发时,如果要想实现双向绑定在wxml上加上model:value
就可以了,但是记得有一点只支持一个变量,在时想要在一个对象上的属性作双向绑定是无效的,微信官方是不支持这种方法,和vue.js有区别。如果想要对象属性上实现双向绑定,只能在input上加一个方法监听去setData
来实现。
核心方法
写一个下面的js
方法,名称可以任意取,用于绑定input
输入
bindInput(e){
// 表单双向数据绑定
var that = this;
var dataset = e.currentTarget.dataset;
// data-开头的是自定义属性,可以通过dataset获取到,dataset是一个json对象
var name = dataset.name;
var value = e.detail.value;
// 拼接对象属性名,用于为对象属性赋值
var attributeName = 'applyFormObject.' + name
that.data[name] = value;
that.setData({
[attributeName]: that.data[name]
});
// console.log(that.data[name])
},
其中需要更改的地方只有applyFormObject
,这是一个在data中定义的对象
Page({
data: {
applyFormObject: {
name: '',
phone: ''
}
});
通过dataset获取到自定义的data-xxx属性值,该属性值就是input绑定的属性名称,比如data-name="phone"就等同于<input type="text" name="phone">中的name属性,var name = dataset.name;获取到属性的值以后在拼接对象名称,通过that.setData方法完成对象属性赋值,便实现了对象属性的双向数据绑定。
如何使用
在小程序的wxml中定义data-name值对应对象属性名,然后在定义bindinput值对应刚刚的方法名称,即可将input的值实时绑定到对象applyFormObject的属性上,方便表单提交。
<view class="form-item">
<input class="input" bindinput="bindInput" data-name="name" placeholder="请输入姓名" auto-focus/>
</view>
<view class="form-item">
<input type="number" class="input" maxlength="11" bindinput="bindInput" data-name="phone" placeholder="请输入手机号码" />
</view>