想用vue的v-model功能,但是微信小程序本身不支持,又想少写代码,所以在这里做一个简单的处理,实现数据的绑定。

思路就是给input框绑一个和属性一样的id和input事件,也可以是其它属性或者事件,取到target的id,然后通过自动触发setData设值。

wxml文件

<view class="weui-flex__item padding_left_12">
    <input placeholder-class="placeholder" placeholder="输入第一个字" value="{{firstWord}}" id="firstWord" bindinput="setTexts"/>
</view>

页面初始数据data

data: {
    firstWord: '',
    secondWord: '',
    thirdWord: '', 
}

设值方法

  /**
   * 用户离开点击后设值到data
   */
   setTexts: function (e) {
    let id = e.currentTarget.id;
    this.setData({
      [id]:  e.detail.value
    })
  },

这样就完成了,(有追求的还可以自己做一下防震荡处理)。

wx.showToast这个方法再封装一次,有必要…

目前有mpvue 继承自 Vue.js,其技术规范和语法特点与 Vue.js 保持一致,可以用,但是还有一些不支持的特性。

http://mpvue.com/mpvue/

 

分类: 小程序

0 条评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注