Vue:数据双向绑定

Vue 的 v-model 实现了表单元素与数据的双向绑定。当数据变化时，视图自动更新；当用户通过视图修改内容时，数据也会同步变化。这种设计简化了表单交互的逻辑。

基础用法

<template>
 ＜div＞
  <!-- 输入框与数据双向绑定 -->
  <input v-model="message" placeholder="输入内容">
  <p＞你输入的内容是：{{ message }}＜/p＞

  <!-- 文本域 -->
  <textarea v-model="text"＞＜/textarea＞
  
  <!-- 下拉选择 -->
  <select v-model="selected">
    <option value="A"＞选项A＜/option＞
    <option value="B"＞选项B＜/option＞
  </select＞
 ＜/div＞
</template＞

<script＞
export default {
  data() {
    return {
      message: "",
      text: "",
      selected: "A"
    };
  }
};
</script＞

处理复选框（Checkbox）

单个复选框（绑定布尔值）

<template＞
 ＜div＞
  <input type="checkbox" v-model="isChecked"> 是否同意
 ＜/div＞
</template＞

<script＞
export default {
  data() {
    return { isChecked: false }
  }
};
</script＞

多个复选框（绑定数组）

<template＞
 ＜div＞
  <input type="checkbox" value="游泳" v-model="hobbies"> 游泳
  <input type="checkbox" value="跑步" v-model="hobbies"> 跑步
  <p＞选择的爱好：{{ hobbies }}＜/p＞
 ＜/div＞
</template＞

<script＞
export default {
  data() {
    return { hobbies: [] }  // 必须是数组
  }
};
</script＞

处理单选框（Radio）

<template＞
 ＜div＞
  <input type="radio" value="男" v-model="gender"> 男
  <input type="radio" value="女" v-model="gender"> 女
 ＜/div＞
</template＞

<script＞
export default {
  data() {
    return { gender: "男" }
  }
};
</script＞

修饰符（Modifiers）

.lazy

将同步时机从 input 事件改为 change 事件（输入框失去焦点时更新）：

<input v-model.lazy="message">

.number

自动将输入值转为数字类型：

<input v-model.number="age" type="number">

.trim

自动去除首尾空格：

<input v-model.trim="username">

原理浅析

v-model 本质是一个语法糖，相当于同时使用 v-bind 和 v-on。比如对于输入框：

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

等价于：

<input v-model="message">

自定义组件中使用

在自定义组件中，v-model 默认绑定 value 属性和监听 input 事件。例如：

＜!-- 子组件 --＞
＜custom-input v-model="msg"＞＜/custom-input＞

＜!-- 等价于 --＞
＜custom-input 
  :value="msg" 
  @input="msg = $event"
＞＜/custom-input＞

在子组件内部通过 props 接收和 $emit 触发：

// 子组件代码
export default {
  props: ['value'],
  methods: {
    handleInput(e) {
      this.$emit('input', e.target.value);
    }
  }
}