v-model学习

v-model 是 Vue.js 中的一个指令，用于在表单输入和应用状态之间创建双向数据绑定。这意味着当输入值发生变化时，绑定的数据也会更新，反之亦然。v-model 通常用于 input、textarea 和 select 元素。

v-model 的基本用法：

1. 文本输入：
   在 input 元素上使用 v-model 可以将输入框的值与数据属性绑定。

   <input v-model="message" placeholder="Enter a message">
   

   在这个例子中，当用户在输入框中输入文本时，Vue 实例中的 message 属性会相应地更新。

2. 多行文本：
   对于 textarea 元素，v-model 也可以实现双向绑定。

   <textarea v-model="description" placeholder="Enter a description"></textarea>
   

3. 复选框：
   使用 v-model 可以绑定复选框的选中状态。

   <input type="checkbox" v-model="checked"> Check me
   

4. 单选按钮：
   单选按钮组可以通过 v-model 绑定到同一个值。

   <input type="radio" value="option1" v-model="picked"> Option 1
   <input type="radio" value="option2" v-model="picked"> Option 2
   

5. 下拉选择：
   v-model 可以绑定到 select 元素，实现选择值的双向绑定。

   <select v-model="selected">
     <option value="option1">Option 1</option>
     <option value="option2">Option 2</option>
   </select>
   

v-model 的修饰符：

Vue 提供了几个修饰符来扩展 v-model 的功能：

1. .lazy：
   默认情况下，v-model 在 input 事件中更新数据，添加 .lazy 修饰符后，它会在 change 事件中更新。

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

2. .number：
   输入值会自动转换为数值类型。

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

3. .trim：
   输入值前后的空格会被自动去除。

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

v-model 的动态绑定：

v-model 可以绑定到一个对象的属性上，属性名可以是动态的。

<input v-model="object[fieldName]">

v-model 与组件：

在自定义组件中，v-model 可以通过 props 和 events 来实现自定义的双向绑定。组件需要定义 value prop 和 input event 来配合使用。

// 子组件
export default {
   
  props: ['value'],
  emits: ['input'],
  methods: {
   
    updateValue(event) {
   
      this.$emit('input', event.target.value);
    }
  }
}

<!-- 子组件模板 -->
<input :value="value" @input="updateValue">

<!-- 父组件 -->
<custom-input v-model="parentValue"></custom-input>

总结：

v-model 是 Vue 中实现数据双向绑定的重要工具，它简化了表单数据的同步操作。通过使用 v-model，开发者可以轻松地在用户界面和应用状态之间同步数据，同时利用修饰符来扩展其功能。在组件中，v-model 也可以通过自定义 props 和 events 来实现，这为创建可复用的表单组件提供了便利。