微信小程序实现双向绑定

微信小程序实现双向绑定

用过vue的人,可能都会感觉使用微信小程序很坑,举个例子,最简单的双向绑定都没有,需要开发人员自己搞定,很麻烦。这里就教大家怎么实现小程序的双向绑定

1.添加需要引用的公共js文件

创建commonMixin.js
image.png
commonMixin.js具体内容如下:

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
    }
    this.setData(nameMap)
  }
}
2.在需要用到双向绑定的页面引用

commonMixin.js文件创建成功后,在需要用到双向绑定的页面引用即可。下面以login.wxml登录界面为例,

login.js具体操作如下:

// 引用公共app.js公共内容
var app = getApp();
// page/component/login/login.js
// 引用双向绑定js
var commonMixin = require('../../../util/commonMixin')
Page(Object.assign({
  // 页面的初始数据
  data: {
    userInfo: {
      loginName: '',
      password: ''
    }
  },
}, commonMixin))

引用成功后,重点是最下面“, commonMixin))”不要忽略了。这样就成功引用了

login.wxml具体操作如下:

<input class="weui-input" data-name='userInfo.loginName' value='{{userInfo.loginName}}' bindinput="inputgetName" placeholder="请输入登录账号" />

控件需要bindinput绑定inputgetName方法,data-name属性也要与需要操作的变量匹配,否则会失效,这样就完成了。

评论

友情链接:

陌上花开

神奇的海螺

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×