微信小程序input数据绑定 input如何实现双向绑定

小程序开发

2021-07-09

  我们平时在开发项目的时候,如果习惯于用vue的同学,都知道实现双向绑定很轻松,但是在对于小程序项目来说,要想实现双向绑定,就没那么容易了,因此,对于第一次开发小程序项目的人来说,可能还有些疑惑,今天厦门在乎科技为大家带来微信小程序input数据绑定,一起来了解一下吧。

  

微信小程序input数据绑定 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)

  }

  }

  

微信小程序input数据绑定 input如何实现双向绑定


  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传入动态参数

  

微信小程序input数据绑定 input如何实现双向绑定


  以上就是今天为大家带来的关于“微信小程序input数据绑定 input如何实现双向绑定”全部内容,长时间使用vue,发现v-model确实很好用,用了小程序之后,才发现小程序的双向绑定那么难用,必须有个bindinput来触发改变值,想要了解更多关于小程序开发的内容,欢迎关注厦门在乎科技-专注小程序、app、网站开发

即刻联系「在乎科技」专业项目经理为您提供产品咨询和项目报价!

立即咨询

CONTACT US

联系我们

联系电话:

131-6399-9993

电子邮箱:

公司地址:

厦门市思明区莲花南路6号北方大厦601单元

公司地址