第一阶段：Vue 基础入门（第 6 天）

Vue 的 v-model 双向数据绑定

核心知识点

1. v-model 的作用

   • 实现表单元素与数据的双向绑定：数据变化自动更新视图，视图变化自动更新数据。
   • 本质是 v-bind（绑定数据） + v-on（监听事件）的语法糖。

2. 不同表单元素的绑定方式

   • 文本输入框（<input type="text">） ：

     <input type="text" v-model="message">
     <p>输入内容：{{ message }}</p>

   • 单选按钮（<input type="radio">） ：

     <input type="radio" value="A" v-model="selected"> A
     <input type="radio" value="B" v-model="selected"> B
     <p>选中：{{ selected }}</p>

   • 复选框（<input type="checkbox">） ：

     • 单个复选框：绑定布尔值

       <input type="checkbox" v-model="isAgree"> 同意协议

     • 多个复选框：绑定数组

       <input type="checkbox" value="Vue" v-model="techs"> Vue
       <input type="checkbox" value="React" v-model="techs"> React
       <p>已选：{{ techs }}</p>

   • 下拉选择框（<select>） ：

     <select v-model="fruit">
       <option value="apple">苹果</option>
       <option value="banana">香蕉</option>
     </select>
     <p>选中：{{ fruit }}</p>

3. 修饰符

   • .lazy ：将 input 事件改为 change 事件（延迟更新，失焦后同步）

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

   • .number ：将输入值转为数字类型

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

   • .trim ：自动去除首尾空格

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

---

案例代码

<div id="app">
  <!-- 文本输入框 -->
  <input type="text" v-model="text" placeholder="输入文本">
  <p>实时显示：{{ text }}</p>

  <!-- 单选按钮 -->
  <input type="radio" value="male" v-model="gender"> 男
  <input type="radio" value="female" v-model="gender"> 女
  <p>性别：{{ gender }}</p>

  <!-- 多选复选框 -->
  <input type="checkbox" value="跑步" v-model="hobbies"> 跑步
  <input type="checkbox" value="阅读" v-model="hobbies"> 阅读
  <p>爱好：{{ hobbies }}</p>

  <!-- 下拉选择框 -->
  <select v-model="city">
    <option value="beijing">北京</option>
    <option value="shanghai">上海</option>
  </select>
  <p>城市：{{ city }}</p>

  <!-- 修饰符示例 -->
  <input v-model.lazy="lazyText" placeholder=".lazy 失焦后更新">
  <p>延迟更新：{{ lazyText }}</p>

  <input v-model.number="num" type="number" placeholder=".number 转为数字">
  <p>数字类型：{{ typeof num }}</p>

  <input v-model.trim="trimmedText" placeholder=".trim 去除首尾空格">
  <p>去除空格：{{ trimmedText }}</p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    text: '',
    gender: '',
    hobbies: [],
    city: '',
    lazyText: '',
    num: null,
    trimmedText: ''
  }
});
</script>

---

总结要点

1. 灵活适配表单类型 ：
   • v-model 根据表单元素类型自动适配绑定的数据类型（如文本→字符串、多选→数组）。
2. 修饰符优化体验 ：
   • .lazy 减少频繁更新，.number 避免类型错误，.trim 提升数据纯净度。
3. 双向绑定本质 ：
   • 底层通过 v-bind 绑定数据 + v-on 监听 input 或 change 事件实现。

示例效果：

• 文本输入框内容实时同步到页面。
• 单选/复选框选中后，数据立即更新。
• .lazy 修饰符需失焦后触发更新，.number 将输入转为数字类型。