Vue3中的模板指令——表单输入绑定指令v-model（:value和@input）

4.6.5 表单输入绑定指令v-model（:value和@input）

在前端处理表单时，常常需要将表单输入框的内容同步给 JavaScript 中相应的变量。手动连接值绑定和更改事件监听器可能会很麻烦：

<input
  :value="text"  //属性绑定
  @input="event => text = event.target.value" //事件绑定
/>

为了简化表单输入值绑定，vue框架提供了v-model指令：

<input v-model="text"/>

另外，v-model 还可以用于绑定各种不同类型的输入，如，<textarea>、<select> 元素。它会根据所使用的元素自动使用对应的 DOM 属性和事件组合：

• 文本类型的<input>和<textarea>元素会绑定value属性并侦听其input事件；
• <input type="checkbox">和<input type="radio">会绑定checked属性并侦听 change 事件；
• <select> 会绑定 value属性并侦听 change 事件。

提示：v-model 会忽略任何表单元素上初始的 value、checked 或 selected属性。它始终将当前绑定的JavaScript状态视为数据的正确来源。因而，应该在JavaScript中使用响应式的API来声明该初始值。

4.6.5.1 input文本输入绑定示例

// App.vue
<script setup>
import { ref } from 'vue'

const message = ref('') //使用响应式API ref声明初始值为空字符
</script>

<template>
  <p>Message is: {
  { message }}</p>
    <input v-model="message" placeholder="edit me" />
</template>

提示： 在使用IME输入法的语言 (如，中文、日文或韩文等)时，会发现v-model不会在IME输入还在拼字阶段时触发更新。如果想在拼字阶段也触发更新，那么需要直接使用自定义的input事件监听器和value 绑定，而不要使用 v-model。