微信小程序实现双向数据绑定

给input绑定data随后监听输入事件获取event对象从中拿到value

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

Page({
  data: {
    inputValue:"双向数据绑定",
  },
  inputEdit(event){
    this.setData({
      inputValue:event.detail.value
    })
  }
})

<!--index.wxml-->
<view class="container">
  <!-- 双向数据绑定 -->
  <input type="text" value="{{inputValue}}" bindinput="inputEdit"/>
  <text>{{inputValue}}</text>
</view>

但是这样去做虽然能实现效果但是变量不好维护，我们可以使用data-*=“”绑定与data。相同的值实现动态绑定。

<!--index.wxml-->
<view class="container">
  <!-- 使用data-*双向数据绑定 -->
  <input type="text" value="{{inputValue}}" bindinput="inputEdit" data-key="inputValue"/>
  <text>{{inputValue}}</text>
</view>

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

Page({
  data: {
    inputValue:"双向数据绑定",
    },
  inputEdit(event){
    this.setData({
      [event.target.dataset["key"]]:event.detail.value
    })
  }
})

搞定