Vue3 v-model 指令

Vue3 v-model 指令 Vue3 内置指令 v-model 指令用于在表单输入元素和组件上创建双向数据绑定。基本说明 v-model 指令会在表单元素和组件上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。期望类型: 根据表单元素类型变化作用: 在表单输入元素和组件上创建双向数据绑定。基本用法 1、文本输入实例 [mycode4 type='html'] ..

更新于 2026/7/16

教程详情页默认 noindex。

Vue3 v-model 指令

Vue3 内置指令

v-model 指令用于在表单输入元素和组件上创建双向数据绑定。

基本说明

v-model 指令会在表单元素和组件上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。

期望类型: 根据表单元素类型变化
作用: 在表单输入元素和组件上创建双向数据绑定。

基本用法

1、文本输入

实例

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

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

2、复选框

实例

<template>
<div>
<input type="checkbox" id="agree" v-model="agreed" />
<label for="agree">我同意条款</label>
<p>已同意: {{ agreed }}</p>
</div>
</template>

<script>
export default {
data() {
return { agreed: false }
}
}
</script>

修饰符

.lazy: 在 change 事件后同步（而非 input）
.number: 自动转换为数字
.trim: 自动去除首尾空格

实例

Vue3 内置指令