⼩程序记：input双向数据绑定
长时间使⽤VUE，发现v-model确实很好⽤，⽤了⼩程序之后，才发现⼩程序的双向绑定那么难⽤，必须有个bindinput来触发改变值。
经过研究发现，⼩程序的双向绑定也可以实现，但是稍复杂点，思路和⼤家说⼀下，最后附代码：
1、利⽤bindinput来触发改变
2、利⽤data-name来绑定获取的数据
3、bindinput触发时利⽤event获取，name的值，然后⽤this.setData改变data-name绑定的参数。
4、利⽤data-name中间属性来动态指定对象还是⾮对象，⼊data-name="login"或data-name="login.username"，这样可以根据中间有没有.来判断是对象还是直接参数
5、将⽅法拆出来，动态引⼊，哪个页⾯⽤引⼊到哪个页⾯
代码如下：
inputgetName(e){
let name = e.currentTarget.dataset.name;
let nameMap = {}
if(name.indexOf('.')){
let nameList = name.split('.')input标签placeholder属性
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('../../mixi
ns/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))
使⽤时：
<input type='number' placeholder='请输⼊⽤户名' maxlength="11" bindinput="inputgetName" data-name='login.username' value='{{login.username}}'/>
动态的是这个地⽅：bindinput="inputgetName" data-name='login.username'，bindinput触发改变，data-name传⼊动态参数

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。