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>