###
Vue 3 中 `v
-model` 指令的
使用方法与示例
`v
-model` 是
Vue 提供的一个语法糖，用于在
表单控件和组件之间实现双向数据绑定。在
Vue 3 中，`v
-model` 的
使用方式更加灵活，尤其在组合式 API 和自定义组件中得到了增强。以下将详细介绍其
基本用法、在
表单控件中的应用、以及如何在自定义组件中实现 `v
-model`。
####
基本用法
在
Vue 3 中，`v
-model` 可以直接用于 HTML
表单元素，如 `<input>`、`<textarea>`、`<select>` 等，实现数据的双向绑定。例如，绑定一个文本输入框：
```
vue
<template>
<input v
-model="message" />
<p>输入的内容是：{{ message }}</p>
</template>
<script setup>
import { ref } from '
vue';
const message = ref('');
</script>
```
上述代码中，`message` 是一个响应式
变量，通过 `v
-model` 与 `<input>`
元素进行双向绑定。用户在输入框中输入的内容会自动更新 `message` 的
值，并且 `message` 的变化也会反映在输入框中 [^4]。
#### 在
表单控件中的应用
`v
-model` 不仅适用于文本输入框，还可以用于复选框、单选按钮、下拉选择框等
表单控件。
##### 复选框
```
vue
<template>
<input type="checkbox" v
-model="isChecked" />
<p>是否选中：{{ isChecked }}</p>
</template>
<script setup>
import { ref } from '
vue';
const isChecked = ref(false);
</script>
```
在复选框中，`v
-model` 绑定的是布尔
值，选中时为 `true`，未选中时为 `false` [^3]。
##### 单选按钮
```
vue
<template>
<input type="radio" v
-model="selectedOption" value="option1" /> 选项1
<input type="radio" v
-model="selectedOption" value="option2" /> 选项2
<p>选中的选项是：{{ selectedOption }}</p>
</template>
<script setup>
import { ref } from '
vue';
const selectedOption = ref('');
</script>
```
单选按钮组中，`v
-model` 绑定的是选中项的 `value`
值 [^3]。
##### 下拉选择框
```
vue
<template>
<select v
-model="selectedOption">
<option value="option1">选项1</option>
<option value="option2">选项2</option>
</select>
<p>选中的选项是：{{ selectedOption }}</p>
</template>
<script setup>
import { ref } from '
vue';
const selectedOption = ref('');
</script>
```
`v
-model` 在 `<select>`
元素中同样绑定的是选中项的 `value`
值 [^3]。
#### 自定义组件中的 `v
-model`
在
Vue 3 中，`v
-model` 也可以用于自定义组件，实现组件内部状态与父组件之间的双向绑定。默认情况下，`v
-model`
使用 `
modelValue` 作为 prop，并通过 `update:
modelValue` 事件进行更新。
##### 示例：自定义输入组件
```
vue
<!
-- ChildComponent.
vue -->
<template>
<input :value="
modelValue" @input="$emit('update:
modelValue', $event.target.value)" />
</template>
<script setup>
const props = defineProps(['
modelValue']);
const emit = defineEmits(['update:
modelValue']);
</script>
```
```
vue
<!
-- ParentComponent.
vue -->
<template>
<ChildComponent v
-model="message" />
<p>输入的内容是：{{ message }}</p>
</template>
<script setup>
import { ref } from '
vue';
import ChildComponent from './ChildComponent.
vue';
const message = ref('');
</script>
```
在自定义组件中，`
modelValue` 是从父组件传递过来的
值，而 `update:
modelValue` 事件用于通知父组件更新 [^2]。
####
使用 `v
-model` 实现动态
表单
`v
-model` 还可以与其他指令（如 `v
-show`）结合
使用，实现动态
表单交互。例如，在用户选择订购饮料后显示可供选择的饮料列表：
```
vue
<template>
<select v
-model="selectedCategory">
<option value="">请选择</option>
<option value="coffee">咖啡</option>
<option value="tea">茶</option>
</select>
<div v
-show="selectedCategory === 'coffee'">
<h4>咖啡种类：</h4>
<ul>
<li v
-for="item in coffeeOptions" :key="item">{{ item }}</li>
</ul>
</div>
<div v
-show="selectedCategory === 'tea'">
<h4>茶种类：</h4>
<ul>
<li v
-for="item in teaOptions" :key="item">{{ item }}</li>
</ul>
</div>
</template>
<script setup>
import { ref } from '
vue';
const selectedCategory = ref('');
const coffeeOptions = ['拿铁', '卡布奇诺', '美式'];
const teaOptions = ['绿茶', '红茶', '乌龙茶'];
</script>
```
在该示例中，`v
-model` 用于绑定用户选择的类别，`v
-show` 根据选择的类别动态显示对应的饮料列表 [^5]。
####
Vue 2 与
Vue 3 的 `v
-model` 差异
Vue 3 的 `v
-model` 相比
Vue 2 更加灵活，尤其是在组合式 API 中。
Vue 2 中 `v
-model` 依赖 `this` 上下文，而
Vue 3 则通过 `
modelValue` 和 `update:
modelValue` 实现更清晰的状态管理。此外，
Vue 3 支持在同一个组件上
使用多个 `v
-model`，通过 `v
-model:name` 的方式实现多个双向绑定 [^2]。
---
本文介绍了Vue.js中v-model的使用，它实现了表单元素值的双向绑定。示例展示了如何在输入框内容变化时实时更新显示，并通过点击按钮和按键回车事件触发不同操作，如修改初始值和弹窗显示当前值。这有助于理解Vue.js的数据响应性和事件监听机制。
扫一扫
1542
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
