当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 小程序：封装双向数据绑定

小程序：封装双向数据绑定

2020年07月09日  | 移动技术网IT编程  | 我要评论

适合项目表单比较少的

微信开发者工具没有像vue上的v-model直接使用的双向数据绑定功能，所以要利用小程序 的 bindinput=“inputgetName” 取实现，下面附上代码：
  1. 在xxx.wxml文件中
<input bindinput="userPhoneInput" placeholder="请输入您的手机号" />
  1. 在xxx.js文件中
data: {
    phone: null
  },
userPhoneInput: function(e) {
    this.setData({
      phone: e.detail.value
    })
  },
  1. 这样 this.data.phone就可以像在vue中this.phone一样去使用了，完整代码如下：
    login.wxml:
    在这里插入图片描述
    login.js:
    在这里插入图片描述

封装全局使用，适合表单项较多的项目

首先我们把绑定逻辑抽出来单独放到一个js文件中，在那个页面使用就在那哪个页面引入，不用像上面手机号，验证码，要写两个，碰到表单有n项的就要写n个bindinput的函数
  1. 首先在建一个wx-model.js文件，这个我放到了utils文件里面：
    在这里插入图片描述
  2. 在 login.js里面引入
    在这里插入图片描述
  3. 在login.wxml里面使用
    在这里插入图片描述
  4. 附上所有代码
// wx-model.js

module.exports = {

  inputgetName(e) {
    let name = e.currentTarget.dataset.name;
    var value = e.detail
    this.setData({
      [name]: value
    })
  }

}

//  login.wxml

<!--pages/com/login/login.wxml-->
<view class="loginIndex">
	<image class="logo" src="../../../static/images/x_logo.png"></image>
	<view class="form">
		<van-field bindinput="inputgetName" data-name='email' left-icon="envelop-o" placeholder="{{L.email}}" />
		<van-field bindinput="inputgetName" data-name='password' left-icon="bag-o" placeholder="{{L.pwd}}" right-icon="{{eye}}" type="{{pwdtype}}" bind:click-icon='changeEye' />
	</view>
	<view class="login button" bindtap="loginEmail">{{L.login}}</view>
	<view class="bottom">
		<image class="wx" bindtap="loginwx" src="../../../static/images/weixin.png"></image>
		<view class="tip fosi28 col2">
			<text class="col1">{{L.tip1}}</text>
			<text>{{L.tip2}}</text>
			<text>{{L.tip3}}</text>
		</view>
	</view>
</view>

// login.js

// pages/my/my/my.js
import http from '../../../utils/api'
let api = http.login
import LangUtils from '../../../utils/i18n'
let langSrc = LangUtils.getLangSrc()
var commonMixin = require('../../../utils/wx-model')
Page(Object.assign({
  /*** 页面的初始数据*/
  data: {
    L: {
      ...langSrc.login
    },
    eye: 'closed-eye',
    pwdtype: 'password',
    email: '',
    password: ''
  },
  /*** 生命周期函数--监听页面显示*/
  onShow: function () {
    this.setLanguage();
  },
  /*** 重新设置语言*/
  setLanguage() {
    langSrc = LangUtils.getLangSrc()
    this.setData({
      L: {
        ...langSrc.login
      },
    })
  },
  // 邮箱登录
  loginEmail(){
    console.log(this.data);
    return
    api.emailLogin({
      'username': this.data.email,
      'password': this.data.password
    }, {
      "showLoading": "true",
      "loadingTitle": ""
    })
    .then(res => {
      console.log(res);
      
    })
  },
  // 密码显示
  changeEye(){
    var im = this.data.eye == 'closed-eye' ? 'eye-o' : 'closed-eye'
    var type = this.data.eye == 'closed-eye' ? 'text' : 'password'
    this.setData({
      eye: im,
      pwdtype: type
    })
  }
},commonMixin))

End

后面会上一些小程序实现国际化

本文地址：https://blog.csdn.net/buzhao1624/article/details/107213816

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网