v-model

v-model 是 Vue.js 中的一个指令，用于在表单控件元素和 Vue 实例的数据之间实现双向数据绑定。这意味着，任何时候用户在输入框中输入数据，Vue 实例中的数据也会自动更新，反之亦然。这种双向绑定的机制使得表单处理变得非常简洁和直观。

基本用法

v-model 的基本用法如下：

<!-- 文本输入框 -->
<input v-model="message">

<!-- 多行文本框 -->
<textarea v-model="message"></textarea>

<!-- 单选框 -->
<input type="radio" value="A" v-model="picked"> A
<input type="radio" value="B" v-model="picked"> B

<!-- 复选框 -->
<input type="checkbox" v-model="checkedNames" value="Jack"> Jack
<input type="checkbox" v-model="checkedNames" value="Tom"> Tom

<!-- 选择框 -->
<select v-model="selected">
  <option disabled value="">请选择</option>
  <option>苹果</option>
  <option>香蕉</option>
</select>

详细解释

1. 文本输入框和多行文本框：

   <input v-model="message">
   <textarea v-model="message"></textarea>
   

   在这两个例子中，v-model 绑定了 message 数据属性到输入框和多行文本框。用户在输入框中输入的内容会更新 message，而 message 的变化也会反映在输入框中。

2. 单选框：

   <input type="radio" value="A" v-model="picked"> A
   <input type="radio" value="B" v-model="picked"> B
   

   这里，v-model 绑定了 picked 数据属性到单选框。选中的单选框的值会更新 picked，并且 picked 的变化会改变选中的单选框。

3. 复选框：

   <input type="checkbox" v-model="checkedNames" value="Jack"> Jack
   <input type="checkbox" v-model="checkedNames" value="Tom"> Tom
   

   这里，v-model 绑定了 checkedNames 数据属性到复选框组。选中的复选框的值会被添加到 checkedNames 数组中，取消选中的复选框的值会从数组中移除。

4. 选择框：

   <select v-model="selected">
     <option disabled value="">请选择</option>
     <option>苹果</option>
     <option>香蕉</option>
   </select>
   

   这里，v-model 绑定了 selected 数据属性到选择框。选中的选项的值会更新 selected，而 selected 的变化会改变选择框中的选中项。

修饰符

v-model 还支持一些修饰符，可以用来控制不同的输入行为：

• .lazy：将事件从 input 更改为 change，这意味着数据只有在失去焦点或选择更改时才会更新。

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

• .number：自动将用户输入的值转换为数字。

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

• .trim：自动去除用户输入的前后空白字符。

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

使用场景

v-model 在处理表单数据时非常有用，例如创建动态表单、处理用户输入、实时更新数据等。在 Vue.js 应用中，它简化了与用户交互的逻辑，使得数据和视图之间的同步变得直观和容易管理。