当前位置：首页 > news >正文

class 5: vue.js 3 v-model和表单输入

news 2025/7/10 11:04:30

v-model是Vue.js 3中用于实现双向绑定的重要指令，双向绑定就是对于数据的修改会映射回UI组件上，同时对于UI组件上数据的变更也会映射回底层数据当中，v-model会根据控件的类型自动选取正确的方法来更新元素
v-model底层实现的原理实际上是v-bind和v-on的结合，首先使用v-bind为value属性绑定变量；然后使用v-on绑定input事件，并在事件回调中重新为value属性绑定的变量赋值

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><div id="app"></div><template id="my-app"><h2>{{ message }}</h2><div class="container"><input type="text" class="input" :value="message" @input="inputChange"><input type="text" class="input" v-model="message"></div></template><script src="./js/vue.js"></script><script>const App = {template: '#my-app',data() {return {message: 'Hello World'}},methods: {inputChange(event) {this.message = event.target.value}}}Vue.createApp(App).mount('#app')</script>
</body>
</html><style>
.container {display: flex;flex-wrap: wrap;width: 100px;
}
.input {width: 100px;margin: 10px;
}
</style>

可以看到，上面的两种input组件都能实现双向绑定的效果

v-model的修饰符

v-model指令支持使用修饰符来完成一些特殊的操作，Vue.js 3常见的v-model修饰符如下

.lazy：将输入内容的更新延迟到change事件触发时再进行，而不是每次输入内容都进行更新

<input type="text" class="input" v-model.lazy="message">

.number：自动将输入内容转换为数字类型，如果不用这个的话，默认输入的都是字符串类型，用这个之后，数字会自动转换为数字类型

<input type="text" class="input" v-model.number="message">

.trim：去除输入内容的首位空格，这个的效果是最中绑定到数据上的时候，会自动去除首位的空格

<input type="text" class="input" v-model.trim="message">

可以用下面的代码整体验证一下

<template id="my-app"><h2>{{ message }} -> {{ typeof message}}</h2><div class="container"><input type="text" class="input" :value="message" @input="inputChange"><input type="text" class="input" v-model="message"><input type="text" class="input" v-model.lazy="message"><input type="text" class="input" v-model.number="message"><input type="text" class="input" v-model.trim="message"></div>
</template>