• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

小程序记:input双向数据绑定

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

长时间使用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、将方法拆出来,动态引入,哪个页面用引入到哪个页面

代码如下:

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))

 

使用时:

<input type='number' placeholder='请输入用户名' maxlength="11" bindinput="inputgetName" data-name='login.username' value='{{login.username}}'/>

动态的是这个地方:bindinput="inputgetName" data-name='login.username',bindinput触发改变,data-name传入动态参数


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
WePY 小程序授权点击取消授权失败的方案发布时间:2022-07-18
下一篇:
使用taro写小程序进行页面间传参与接收发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap