简单实现微信小程序 input 的双向绑定

简单实现微信小程序 input 的双向绑定

data 中定义表单数据

data:{
  formData:{}
}

wxml 中，利用 data- 传递参数到逻辑层

<input 
  bindinput="bindKeyInput"
  value="{{formData.name}}"
  data-params="name"
  placeholder="请输入姓名"
  />

使用中括号的方式 setData，只更新当前编辑的数据，性能更好。

// 封装输入函数（简易双向绑定）
bindKeyInput(event) {
  const value = event.detail.value.replace(/\s+/g, "")  // 将输入的值去除空格
  let { param } = event.currentTarget.dataset  // 获取传入的参数值，此时为 "name"
  const dataPath = `formData.${param}`      // 临时变量，储存要保存值的路径
  this.setData({
    [dataPath]: value                // 更新当前输入的值，实现双向绑定
  }) 
  console.log(`表单对象：`, this.data.formData)
},