Vue基础教程（91）表单输入绑定之实现双向数据绑定：深度扒皮Vue表单绑定：让你的数据“活”起来！-优快云博客

嘿，朋友们！今天咱们来聊个让前端开发爽到飞起的话题——Vue的表单输入绑定。别听到“绑定”就头大，我敢保证，这可能是你学Vue以来最有趣的部分之一。

想象一下：你有个输入框，用户在里面打字，数据立马自动更新；你改个数据，输入框里的内容也跟着变。是不是像变魔术？这就是Vue双向数据绑定的魔力！

一、为什么我们需要“双向绑定”？

来，先吐槽一下没有双向绑定的“苦日子”。

在传统开发中，如果你想获取输入框的值，得写一堆这样的代码：

// 传统方式 - 累死人不偿命
document.getElementById('myInput').addEventListener('input', function() {
  var value = this.value;
  document.getElementById('display').innerText = value;
  // 还要手动更新某个数据变量...
});

每加一个输入框，就得写一遍这样的代码。要是页面有十几个表单控件，光是写这些绑定代码就能让你怀疑人生。

而Vue的做法呢？

<template>
  <div>
    <input v-model="message" placeholder="随便打点字">
    <p>你输入的是：{
  
  { message }}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      message: ''  // 这一行就搞定了所有
    }
  }
}
</script>

看到了吗？一个简单的v-model，数据与视图就自动同步了。你改变输入框内容，message自动更新；你在代码里修改message，输入框内容也自动变化。

这就好比从前你要手动调节老式收音机频道，现在直接用手机APP一键控制——科技改变生活啊！

二、v-model到底是什么鬼？

简单来说，v-model是个语法糖（不是真的糖，不能吃哦）。它实际上是下面这俩操作的简写：

v-bind:value：把数据绑定到输入元素
v-on:input：监听输入事件，更新数据

所以：

<input v-model="something">

等价于：

<input 
  :value="something" 
  @input="something = $event.target.value">

Vue在背后默默帮你做了这些脏活累活，你就偷着乐吧！

三、各类表单控件的绑定姿势

不同的表单控件，绑定方式略有不同。咱们一个一个来盘。

1. 文本输入框（最常用）

<template>
  <div>
    <input v-model="username" type="text" placeholder="请输入用户名">
    <p>欢迎，{
  
  { username }}！</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      username: ''
    }
  }
}