1. 表单输入

• 在前端处理表单时，我们常常需要将表单输入框的内容同步给 JavaScript 中相应的变量。手动连接值绑定和更改事件监听器可能会比较麻烦
• v-model 指令帮我们简化了这一步骤

2. v-model : 数据的双向绑定

概述

• v-model是一个 vue 的内置指令，它可以将数据和视图双向绑定起来
• 在 Vue 中提供了 v-model 这个语法糖指令, 让我们更便捷地将数据和视图绑定在一起

基本用法

<template>
  <div>
    <span>{{ inputValue }}</span>
    <input type="text" v-model="inputValue" />
  </div>
</template>

<script>
  import { defineComponent } from 'vue';

  export default defineComponent({
    name: 'App',
    data() {
      return {
        inputValue: '',
      };
    }
  });
</script>

总结

v-model 是数据和事件处理函数相结合的语法糖，他和原生的 DOM 元素的关系如下

• <input>: value 和 input event
• <textarea>: value 和 input event
• <select>: value 和 change event
• <input type="checkbox">: checked 和 change event
• <radio type="radio">: checked 和 change event

注意

• v-model 会忽略任何表单元素上初始的 value、checked 或 selected 属性。它将始终将当前绑定的 JavaScript 状态视为数据的正确来源。
• 你应该在 JavaScript 中使用 data 选项（options API）来声明该初始值。

3. v-model 的基本用法

• <input type="text"> 中使用：

<template>
  <div>
    <span>{{ inputValue }}</span>
    <input type="text" v-model="inputValue" />
  </div>
</template>

• 在 <select> 中使用：

<template>
  <select name="" :value="selectValue" @change="onSelectValueChange">
    <option value="" disabled>请选择</option>
    <option
      v-for="c of countryList"
      :key="c.value"
      :value="c.value"
    >
      {{ c.label }}
    </option>
  </select>
</template>

注意：

• 在 <select> 中, v-model 如果未能匹配到对应的 value, 则直接设置为空项
• IOS无法触发 change 事件，用户就没有办法选择第一项
• 解决方案: IOS设备中添加
  • <option disabled select-option-0 value="" disabled>请选择</option>

• 在 <input type="checkbox"> 中使用：

<template>
  <div class="select-countries">
    <!-- <h3>{{ selectedCountries }}</h3> -->
    <span
      v-for="c of countryList"
      :key="c.value"
    >
      <label for="">{{ c.label }}</label>
      <input type="checkbox" :value="c.value" v-model="selectedCountries" />
    </span>
  </div>
</template>

• 绑定 <input type="text"> 组 （checkbox-group）上的值

<template>
  <div class="select-countries">
    <!-- <h3>{{ selectedCountries }}</h3> -->
    <span
      v-for="c of countryList"
      :key="c.value"
    >
      <label for="">{{ c.label }}</label>
      <input type="checkbox" :value="c.value" v-model="selectedCountries" />
    </span>
  </div>
</template>

• 绑定 <input type="radio"> 上的值

<template>
  <div>
    <p>{{ gender }}</p>
    女: <input type="radio" value="female" v-model="gender" />
    男: <input type="radio" value="male" v-model="gender" />
  </div>
</template>

4. v-model上的修饰符

• .lazy (转换事件, change + value)
• .number 绑定数字值
• .trim 绑定并去除两边的空格

自定义组件上面使用 v-model

参考官方文档：cn.vuejs.org/guide/compo…

和 Vue2 不同(默认使用 value)，Vue3 是使用 modelValue 作为双向绑定的 prop。

直接使用 v-model 双向绑定默认的组件的值

步骤：

1. 先绑定指令 v-model="modelValue"
2. 在组件中声明prop modelValue
3. 定义自定义事件(固定写法) update:modelValue

代码示例：

• 父组件 Parent.vue

<template>
  <Child v-model="modelValue" />
</template>

<script>
  import { defineComponent } from 'vue';
  import Child from './Child';
  
  export default defineComponent({
    name: 'Parent',
    components: {
      Child
    },
    data() {
      return {
        modelValue: ''
      };
    }
  });
</script>

• 子组件 Child.vue

<template>
  <input type="text" :value="modelValue" @input="handleValueChange" />
</template>

<script>
  import { defineComponent } from 'vue';
  
  export default defineComponent({
    name: 'Child',
    props: {
      modelValue: String
    },
    emits: ['update:modelValue'],
    methods: {
      handleValueChange(ev) {
        const e = ev || window.event;
        const tar = e.target || e.srcElement;
        const { value } = tar;
        
        this.$emit('update:modelValue', value);
      }
    },
  });
</script>

使用计算属性实现 v-model 的绑定

官方示例：

<!-- CustomInput.vue -->

<script>
  import { defineComponent } from 'vue';
  
  export default defineComponent({
    name: 'CustomInput',
    props: {
      modelValue: String
    },
    emits: ['update:modelValue'],
    computed: {
      value: {
        get() {
          return props.modelValue
        },
        set(value) {
          emit('update:modelValue', value)
        }
      }
    },
  });
</script>

<template>
  <input v-model="value" />
</template>

自定义 v-model 的绑定值

• v-model 在组件上都是使用 modelValue 作为 prop，并以 update:modelValue 作为对应的事件。
• 我们可以通过给 v-model 指定一个参数来更改这些名字

  <MyComponent v-model:title="bookTitle" />
  

多个 v-model 绑定

多个 v-model 绑定需要定义参数以及重复上述的步骤

<UserName v-model:first-name="first" v-model:last-name="last" />

---

官网上提出的注意点:

1. 注意在 <textarea> 中是不支持插值表达式的。请使用 v-model 来替代
2. 如果 v-model 表达式的初始值不匹配任何一个选择项，<select> 元素会渲染成一个“未选择”的状态。在 iOS 上，这将导致用户无法选择第一项，因为 iOS 在这种情况下不会触发一个 change 事件。因此，我们建议提供一个空值的禁用选项
3. true-value 和 false-value attributes 不会影响 value attribute，因为浏览器在表单提交时，并不会包含未选择的复选框。为了保证这两个值 (例如：“yes”和“no”) 的其中之一被表单提交，请使用单选按钮作为替代。
4. 对于需要使用 IME 的语言 (中文，日文和韩文等)，你会发现 v-model 不会在 IME 输入还在拼字阶段时触发更新。如果你的确想在拼字阶段也触发更新，请直接使用自己的 input 事件监听器和 value 绑定而不要使用 v-model。
5. 组件上也可以使用 v-model (option model)