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>