微信小程序 input 数据双向绑定

原理:
inputdata-prop绑定一个字符串,和value绑定的变量名一致,给input绑定change事件,事件触发时获取inputvalue值,赋值给对应的变量(通过该inputdata-prop绑定的字符串确定)

wxml页面:

<input value="{{address_detail}}" data-prop="address_detail" bind:change="onChange" type="text"></input>
<input value="{{resiver_tel}}" data-prop="resiver_tel" bind:change="onChange" type="text"></input>

注意: data-prop 绑定的字符串必须和value绑定的变量名一致

js 页面

onChange(e) {
    console.log(e.detail.value)    //input 的 value
    console.log(e.currentTarget.dataset.prop)   //data-prop 绑定的字符串,以此来确定改变的是哪个变量
    this.setData({
      [e.currentTarget.dataset.prop]: e.detail.value
    })
  },

版权声明:本文为daisy0328原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。