我们平时在开发项目的时候，如果习惯于用vue的同学，都知道实现双向绑定很轻松，但是在对于小程序项目来说，要想实现双向绑定，就没那么容易了，因此，对于第一次开发小程序项目的人来说，可能还有些疑惑，今天厦门在乎科技为大家带来微信小程序input数据绑定，一起来了解一下吧。
微信小程序input数据绑定：
经过研究发现，小程序的双向绑定也可以实现，但是稍复杂点，思路和大家说一下，最后附代码：
1、利用bindinput来触发改变
2、利用data-name来绑定获取的数据
3、bindinput触发时利用event获取，name的值，然后用this.setdata改变data-name绑定的参数。
4、利用data-name中间属性来动态指定对象还是非对象，入data-name="login"或data-name="login.username"，这样可以根据中间有没有.来判断是对象还是直接参数
5、将方法拆出来，动态引入，哪个页面用引入到哪个页面
module.exports = {
inputgetname(e){
let name = e.currenttarget.dataset.name;
let namemap = {}
if(name.indexof('.')){
let namelist = name.split('.')
if(this.data[namelist[0]]){
namemap[namelist[0]] = this.data[namelist[0]]
}else{
namemap[namelist[0]] = {}
}
namemap[namelist[0]][namelist[1]] = e.detail.value
}else{
namemap[name] = e.detail.value
}
console.log(namemap)
this.setdata(namemap)
}
}
const successservice = require('../../request/successservice.js')
var commonmixin = require('../../mixins/commonmixin')
page(object.assign({
/**
* 页面的初始数据
*/
data: {
login:{}
},
formsubmit (e) {// 提交
// console.log('form发生了submit事件，携带数据为：', e.detail.value)
console.log(this.data.login)
console.log(e)
wx.switchtab({
url: '../index/index'
})
},
/**
* 用户点击右上角分享
*/
onshareappmessage: function () {
console.log('分享')
}
},commonmixin))
动态的是这个地方：bindinput="inputgetname" data-name='login.username'，bindinput触发改变，data-name传入动态参数
以上就是今天为大家带来的关于“微信小程序input数据绑定 input如何实现双向绑定”全部内容，长时间使用vue，发现v-model确实很好用，用了小程序之后，才发现小程序的双向绑定那么难用，必须有个bindinput来触发改变值，想要了解更多关于小程序开发的内容，欢迎关注厦门在乎科技-专注小程序、app、网站开发
