---
title: "微信小程序实现双向数据绑定"
id: "3180"
type: "post"
slug: "%e5%be%ae%e4%bf%a1%e5%b0%8f%e7%a8%8b%e5%ba%8f%e5%ae%9e%e7%8e%b0%e5%8f%8c%e5%90%91%e6%95%b0%e6%8d%ae%e7%bb%91%e5%ae%9a"
published_at: "2020-11-13T01:32:45+00:00"
modified_at: "2020-11-13T01:36:46+00:00"
url: "https://seq.ink/all/3180.html"
markdown_url: "https://seq.ink/all/3180.html.md"
excerpt: "给input绑定data随后监听输入事件获取event对象从中拿到value //index.js //获取应用实例 const app = getApp() Page({ data: { inputValue:\"双向数据绑定&q ..."
taxonomy_category:
  - "ALL"
  - "Coding代码堆"
---

给`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
    })
  }
})
```

搞定