vue3基础 表单的输入绑定

表单的输入绑定

意义

在前端处理表单时，我们常常需要将表单输入框的内容同步给javascript中相应的变量。手动连接值绑定和更改事件监听器可能会很麻烦，v-model指令帮我们简化了这一步骤

v-model有点类似于双向绑定

<template>
    <h3>表单的输入与绑定</h3>
    <form action="">
    <!--由于输入框的内容与message绑定，所以下面的lable会同步显示-->
        <input type="text" id="input" v-model="message"/>
        <p for="input">{{message}}</p>
        <!--由于选项框的内容与check绑定，所以下面的lable会同步-->
        <input type="checkbox" id="checkbox" v-model="check"/>
        <label for="checkbox">{{check}}</label>
    </form>
</template>

<script>
    export default{
        data() {
            return{
                message:"is message",
                check:false
                }
            }
        }
</script>

<style>
</style>

演示

可以说是非常方便的

修饰符

v-model也提供了修饰符：.lazy,.number,.trim

.lazy

默认情况下，v-model 会在每次 input 事件后更新数据。你可以添加 lazy 修饰符来改为在每次change事件后更新数据

只需要在v-model后加一个.lazy

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

number

只接收数字类型

trim

=“message”/>

### `number`

只接收数字类型

### `trim`

去掉前后空格