微信小程序 input双向绑定_微信小程序input双向绑定-优快云博客

本文链接：https://blog.youkuaiyun.com/u013595395/article/details/119907066

本文介绍了如何在小程序中模拟实现数据双向绑定，主要利用input组件的bindinput和bindblur事件，通过dataSet传递变量名，并使用字符串拼接更新数据。示例代码展示了地市和姓名输入框的双向绑定，确保数据实时更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言:

首先，小程序没有自带的双向绑定。（现在有了，<input model:value="{{value))" />）

正文里是模拟效果，原理是用字符串名来引用变量。

步骤：

（1）主要是使用input的两个方法：bindinput="syncInputValue" bindblur="setInputValue"。

-- 实际上只用bindinput就可以，不过为了减少setDate方法的调用，就把setDate放进bindblur里了。

（2）然后把变量名，通过dataSet传进方法：

wxml: data-field-name="city"

js: let fieldName = e.target.dataset.fieldName;

（3）最后引用变量

this.setData({

[`${fieldName}`]: value

})

代码

wxml

<!--index.wxml-->
<view class="container">
  <view style="display:flex;">
    <view>地市：</view>
    <view>
      <input type='text' value="{{ city }}"  data-is-obj="0" data-obj-name="" data-field-name="city" bindinput="syncInputValue" bindblur="setInputValue" />
    </view>
  </view>
  <view style="display:flex;">
    <view>姓名：</view>
    <view>
      <input type='text' value="{{ user.name }}"  data-is-obj="1" data-obj-name="user" data-field-name="name" bindinput="syncInputValue" bindblur="setInputValue" />
    </view>
  </view>

  <view style="margin-top:100rpx;">
    {{city + "： " +  user.name}}
  </view>

</view>

//index.js
//获取应用实例
const app = getApp()

Page({
  data: {
    city:"示例",
    user:{
      name:"a1"
    },
  },
  onLoad: function () {
  },

  syncInputValue: function(e){
    // console.log("输入：" + e.detail.value)
    this._tempInputValue = e.detail.value;
  },
  setInputValue: function(e){
    let value = this._tempInputValue;
    // console.log("写入：" + value)
    if(!value) {return;}
    let isObj = e.target.dataset.isObj;
    let objName = e.target.dataset.objName;
    let fieldName = e.target.dataset.fieldName;
    if(isObj=="1"){
      let obj = this.data[`${objName}`];
      obj[fieldName] = this._tempInputValue;
      this.setData({
        [`${objName}`]: obj
      });
    }else{
      this.setData({
        [`${fieldName}`]: value
      })
    }
    this._tempInputValue = null;
  },
})

--要离开输入框才会赋值