vue3基础 表单的输入绑定

表单的输入绑定

意义

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

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

<template>
    <h3>表单的输入与绑定h3>
    <form action="">
    
        <input type="text" id="input" v-model="message"/>
        <p for="input">{{message}}p>
        
        <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`

去掉前后空格