本文主要是介绍class 5: vue.js 3 v-model和表单输入,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
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>
这篇关于class 5: vue.js 3 v-model和表单输入的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!