Vue3 表单输入绑定

[1. 基本用法（v-model 语法糖）](#1. 基本用法（v-model 语法糖）)
- [1.1 input 文本框](#1.1 input 文本框)
- [1.2 textarea 多行文本](#1.2 textarea 多行文本)
- [1.3 checkbox 复选框](#1.3 checkbox 复选框)
- - [1.3.1 单一复选框](#1.3.1 单一复选框)
  - - [1.3.1.1 基本使用方式](#1.3.1.1 基本使用方式)
    - [1.3.1.2 真假值自定义](#1.3.1.2 真假值自定义)
  - [1.3.2 多个复选框](#1.3.2 多个复选框)
- [1.4 radio 单选框](#1.4 radio 单选框)
- [1.5 select 选择器（多选时需要按住ctrl键）](#1.5 select 选择器（多选时需要按住ctrl键）)
[2. 表单修饰符](#2. 表单修饰符)
- [2.1 课外拓展（input 和 change 事件的区别）](#2.1 课外拓展（input 和 change 事件的区别）)
- - [2.1.1 触发时机](#2.1.1 触发时机)
  - [2.1.2 适用场景](#2.1.2 适用场景)
- [2.2 表单修饰符的使用](#2.2 表单修饰符的使用)

1. 基本用法（v-model 语法糖）

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

javascript 复制代码

<template>
  <input
  :value="text"
  @input="event => handleInput(event.target.value)">
</template>

<script setup>
import { ref } from 'vue';
let text = ref('')
function handleInput(newText) {
  text.value = newText;
  console.log('text:', text.value); // 用于测试数据是否发生了改变
}
</script>

<style scoped>
</style>

1.1 input 文本框

因为 Vue 中会大量使用到双向数据绑定，因此使用了 v-model 语法糖，为我们简化了这一过程：

javascript 复制代码

<input v-model="text">

javascript 复制代码

<template>
  <input v-model="text" @input="changeInput">
</template>

<script setup>
import { ref } from 'vue';
let text = ref('')
// 不手动修改，只是监听文本框的值变化
function changeInput() {
  console.log('text的值发生了改变', text.value);
}
</script>

<style scoped>
</style>

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

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

1.2 textarea 多行文本

javascript 复制代码

<template>
  <textarea cols="30" rows="10" v-model="textContent"></textarea>
  <p>你当前输入的内容为：{{ textContent }}</p>
</template>

<script setup>
import { ref } from 'vue'
const textContent = ref('')
</script>

<style scoped></style>

1.3 checkbox 复选框

1.3.1 单一复选框

1.3.1.1 基本使用方式

单一的复选框，绑定布尔类型值：

javascript 复制代码

<template>
  <div>
    <input type="checkbox" v-model="checked" />
    <label for="checkbox">{{ checked }}</label>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const checked = ref(true)
</script>

<style scoped></style>

点击复选框，进行切换

1.3.1.2 真假值自定义

1.3.1.1 的例子中，复选框默认真假值为布尔值 true 和 false，但是这其实可以进行自定义：

javascript 复制代码

<template>
  <div>
    <input
      type="checkbox"
      v-model="checked"
      :true-value="1"
      :false-value="0" />
    <!-- 这里的label通常为固定文本，修改为checked只是为了展示数据变化 -->
    <label for="checkbox">{{ checked }}</label>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const checked = ref(1)
</script>

<style scoped></style>

1.3.2 多个复选框

对于多个复选框，我们通常将其多个选项绑定在一个数组或者集合中，方便遍历展示：

javascript 复制代码

<template>
  <div v-for="(item, index) in arr" :key="index">
    <label for="item.id">{{ item.title }}</label>
    <input type="checkbox" v-model="hobby" :id="item.id" :value="item.value" />
  </div>
  <p>{{ message }}</p>
</template>

<script setup>
import { ref, computed } from 'vue'
const hobby = ref([])
const arr = ref([
  { id: 'swim', title: '游泳', value: '游个泳' },
  { id: 'run', title: '跑步', value: '跑个步' },
  { id: 'game', title: '游戏', value: '玩个游戏' },
  { id: 'music', title: '音乐', value: '听个音乐' },
  { id: 'movie', title: '电影', value: '看个电影' }
])
const message = computed(() => {
  // 根据 hobby 的值进行二次计算
  if (hobby.value.length === 0) return '请选择爱好'
  else return `您选择了${hobby.value.join('、')}`
})
</script>

<style scoped></style>

1.4 radio 单选框

javascript 复制代码

<template>
  <input type="radio" id="male" v-model="gender" value="male" />
  <label for="male">男</label>
  <input type="radio" id="female" v-model="gender" value="female" />
  <label for="female">女</label>
</template>

<script setup>
import { ref } from 'vue'
const gender = ref('male')
</script>

<style scoped></style>

1.5 select 选择器（多选时需要按住ctrl键）

javascript 复制代码

<template>
  <!-- 下拉列表列表是单选的话，v-model 绑定的值是一个字符串，这个字符串是 option 的 value 值 -->
  <select v-model="hometown1">
    <option value="" disabled>请选择</option>
    <option v-for="(item, index) in hometownList" :key="index" :value="item.value">
      {{ item.label }}
    </option>
  </select>
  <p>您选择的家乡为：{{ hometown1 }}</p>
  <!-- 如果下拉列表是多选的话，v-model 绑定的值是一个数组，这个数组是 option 的 value 值组成的数组 -->
  <select v-model="hobbies" multiple>
    <option label="" disabled>请选择</option>
    <option v-for="(item, index) in hobbyList" :key="index" :value="item.value">
      {{ item.label }}
    </option>
  </select>
  <p>按住 Ctrl (windows) / Command (Mac) 按钮来选择多个选项。</p>
  <p>您选择的兴趣为：{{ hobbies }}</p>
</template>

<script setup>
import { ref } from 'vue'
const hometown1 = ref('')
const hobbies = ref([])
const hometownList = ref([
  { value: '成都', label: '四川' },
  { value: '帝都', label: '北京' },
  { value: '魔都', label: '上海' },
  { value: '妖都', label: '广州' },
  { value: '陪都', label: '重庆' }
])
const hobbyList = ref([
  { value: 'basketball', label: '篮球' },
  { value: 'football', label: '橄榄球' },
  { value: 'soccer', label: '足球' },
  { value: 'baseball', label: '排球' },
])
</script>

<style scoped></style>

2. 表单修饰符

2.1 课外拓展（input 和 change 事件的区别）

2.1.1 触发时机

input事件‌：用户每次输入（包括键盘输入、粘贴、语音输入等）或通过脚本修改值时实时触发。
change事件‌ ：元素失去焦点且内容发生变化时触发（如点击其他区域、选择下拉框等），不会因输入过程中频繁触发。 ‌

2.1.2 适用场景

input事件‌：适合需要实时反馈的场景，如搜索联想、密码强度检测、字数统计等。
change事件‌：通常用于表单提交前的最终验证，或需要离开输入框后才能确认数据有效性的场景。

2.2 表单修饰符的使用

.lazy：默认情况下，v-model 会在每次 input 事件触发时就更新数据，lazy 修饰符可以改为 change 事件触发后才更新数据；
.number：将用户输入的内容从字符串转为 number 类型；
.trim：默认自动去除用户输入内容中两端的空格。

javascript 复制代码

<template>
  <!-- lazy修饰符演示 -->
  <input type="text" v-model.lazy="mess1" />
  <p>你输入的是：{{ mess1 }}</p>
  <p>类型为{{ typeof mess1 }}</p>
  <p>长度为{{ mess1.length }}</p>

  <!-- number修饰符演示 -->
  <input type="text" v-model.number="mess2" />
  <p>你输入的是：{{ mess2 }}</p>
  <p>类型为{{ typeof mess2 }}</p>
  <p>长度为{{ mess2.length }}</p>

  <!-- trim修饰符演示 -->
  <input type="text" v-model.trim="mess3" />
  <p>你输入的是：{{ mess3 }}</p>
  <p>类型为{{ typeof mess3 }}</p>
  <p>长度为{{ mess3.length }}</p>
</template>

<script setup>
import { ref } from 'vue'
const mess1 = ref('')
const mess2 = ref('')
const mess3 = ref('')
</script>

<style scoped></style>

上一章《Vue3 事件处理》

下一章《Vue3 侦听器》