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>
<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>
<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: 自动去除首尾空格
实例
<input v-model.lazy="lazyInput" placeholder="失焦同步" />
<input v-model.number="age" type="number" placeholder="自动转数字" />
<input v-model.trim="username" placeholder="去除空格" />
<input v-model.number="age" type="number" placeholder="自动转数字" />
<input v-model.trim="username" placeholder="去除空格" />