Vue 中如何在表单中使用 v-model？

推荐答案

在 Vue 中使用 v-model 绑定表单元素的基本语法如下：

// www.javascriptcn.com code example
<template>
  <div>
    <input v-model="message" placeholder="请输入内容">
    <p>输入的内容是: {{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    };
  }
};
</script>

在这个例子中，v-model 用于双向绑定 input 输入框和 Vue 实例中的 message 数据属性。当用户在输入框中输入内容时，message 的值会自动更新，反之亦然。

本题详细解读

1. v-model 的基本用法

v-model 是 Vue 提供的一个指令，用于在表单元素（如 input、textarea、select 等）和 Vue 实例的数据之间创建双向绑定。它的工作原理是通过监听表单元素的 input 或 change 事件来更新数据，同时通过数据的变化来更新表单元素的值。

2. v-model 的实现原理

v-model 实际上是语法糖，它结合了 v-bind 和 v-on 的功能。例如，对于 input 元素，v-model 可以分解为以下代码：

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

• :value="message"：将 input 的 value 属性绑定到 message 数据。
• @input="message = $event.target.value"：监听 input 事件，并在事件触发时将输入框的值赋给 message。

3. v-model 在不同表单元素中的使用

• 文本输入框（input 和 textarea）：v-model 绑定的是字符串类型的值。
• 复选框（checkbox）：v-model 可以绑定布尔值或数组（用于多选框）。
• 单选按钮（radio）：v-model 绑定的是选中的单选按钮的 value。
• 下拉选择框（select）：v-model 绑定的是选中的 option 的 value。

4. v-model 的修饰符

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

• .lazy：将 input 事件改为 change 事件，即在输入框失去焦点或按下回车时才更新数据。
• .number：将输入值自动转换为数字类型。
• .trim：自动去除输入值两端的空格。

例如：

<input v-model.lazy="message" placeholder="请输入内容">

5. 自定义组件的 v-model

在自定义组件中，v-model 默认绑定的是 value 属性和 input 事件。可以通过 model 选项来修改默认的绑定属性和事件。

// www.javascriptcn.com code example
export default {
  model: {
    prop: 'checked',
    event: 'change'
  },
  props: {
    checked: Boolean
  }
};

这样，在父组件中使用 v-model 时，绑定的就是 checked 属性和 change 事件。