Vue 中的 v-model 指令详解

Vue 中的 `v-model` 指令详解

v-model 是 Vue.js 中用于实现表单输入和应用状态之间双向绑定的核心指令。它简化了表单元素与 Vue 实例数据之间的同步过程。

1. 基本用法

v-model 可以在多种表单元素上使用，自动创建双向数据绑定：

html 复制代码

<template>
  <input v-model="message" placeholder="输入内容">
  <p>输入的内容是: {{ message }}</p>
</template>

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

2. 支持的表单元素

v-model 可以用于以下 HTML 表单元素：

元素类型	示例
文本输入	`<input type="text">`
多行文本	`<textarea>`
复选框	`<input type="checkbox">`
单选按钮	`<input type="radio">`
选择框	`<select>`

2.1 文本输入和多行文本

html 复制代码

<input v-model="text" type="text">
<textarea v-model="textarea"></textarea>

2.2 复选框

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

html 复制代码

<input type="checkbox" v-model="checked">
<span>是否选中: {{ checked }}</span>

多个复选框绑定到数组：

html 复制代码

<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<span>选中的名字: {{ checkedNames }}</span>

2.3 单选按钮

html 复制代码

<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>
<span>选择的值: {{ picked }}</span>

2.4 选择框

单选：

html 复制代码

<select v-model="selected">
  <option disabled value="">请选择</option>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>
<span>选择的值: {{ selected }}</span>

多选（绑定到数组）：

html 复制代码

<select v-model="selected" multiple>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>
<span>选择的值: {{ selected }}</span>

3. 修饰符

v-model 提供了三个有用的修饰符：

3.1 `.lazy`

默认情况下，v-model 在每次 input 事件触发后同步数据。使用 .lazy 修饰符会改为在 change 事件后同步：

html 复制代码

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

3.2 `.number`

自动将用户的输入值转为数值类型：

html 复制代码

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

3.3 `.trim`

自动过滤用户输入的首尾空白字符：

html 复制代码

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

4. 自定义组件中的 `v-model`

在自定义组件中，v-model 默认使用 value prop 和 input 事件：

html 复制代码

<custom-input v-model="searchText"></custom-input>

等价于：

html 复制代码

<custom-input
  :value="searchText"
  @input="searchText = $event"
></custom-input>

4.1 自定义组件实现

javascript 复制代码

// CustomInput.vue
export default {
  props: ['value'],
  methods: {
    handleInput(e) {
      this.$emit('input', e.target.value)
    }
  },
  template: `
    <input
      :value="value"
      @input="handleInput"
    >
  `
}

4.2 使用 `model` 选项自定义

可以修改组件内使用的 prop 和事件：

javascript 复制代码

export default {
  model: {
    prop: 'checked',
    event: 'change'
  },
  props: ['checked'],
  methods: {
    handleChange(e) {
      this.$emit('change', e.target.checked)
    }
  },
  template: `
    <input
      type="checkbox"
      :checked="checked"
      @change="handleChange"
    >
  `
}

5. Vue 3 中的变化

在 Vue 3 中，v-model 的实现有所变化：

默认使用 modelValue prop 和 update:modelValue 事件
支持多个 v-model 绑定

5.1 基本用法

html 复制代码

<ChildComponent v-model="pageTitle" />

等价于：

html 复制代码

<ChildComponent
  :modelValue="pageTitle"
  @update:modelValue="pageTitle = $event"
/>

5.2 多个 `v-model` 绑定

html 复制代码

<ChildComponent
  v-model:title="pageTitle"
  v-model:content="pageContent"
/>

6. 最佳实践

对于简单的表单绑定，直接使用 v-model 是最简洁的方式
对于复杂的表单验证，考虑使用 vee-validate 或 vuelidate 等库
在自定义组件中，明确文档说明 v-model 的具体行为
对于大型表单，考虑将表单数据组织在单独的对象中

javascript 复制代码

data() {
  return {
    form: {
      username: '',
      password: '',
      remember: false
    }
  }
}

html 复制代码

<input v-model="form.username">
<input v-model="form.password" type="password">
<input v-model="form.remember" type="checkbox">

v-model 是 Vue 表单处理的核心功能，理解它的工作原理和使用场景可以大大提高开发效率。

Vue 中的 v-model 指令详解