【vue3入门】-【16】表单输入绑定

表单输入绑定

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

<template>
    <h3>表单输入绑定</h3>
    <form>
        <!--v-model：在页面中输入信息的同时，下面p标签也会同步拿到message的信息-->
        <input type="text" v-model="message">
        <p>{{ message }}</p>

        <!--checkbox：勾选框,v-model会将勾选状态同步给check字段，true为勾选状态，false为未勾选状态-->
        <input type="checkbox" id="checkbox" v-model="checked">
        <label for="checkbox">{{ checked }}</label>
    </form>
</template>
<script>
export default {
    data() {
        return {
            message: "",
            checked: false
        }
    }
}
</script>

• 修饰符

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

1. .lay

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

<template>
    <h3>表单输入绑定</h3>
    <form>
        <!--只有在input框中输入完成回车后才会同步message的值-->
        <input type="text" v-model.lazy="message">
        <p>{{ message }}</p>
    </form>
</template>
<script>
export default {
    data() {
        return {
            message: "",
            checked: false
        }
    }
}
</script>

2. .number：自动将用户的输入值转为数值类型，不可转换时，不会进行同步变更
3. .trim：去掉前后空格

以上内容出自
【【2023最新版】Vue3从入门到精通，零基础小白也能听得懂，写得出，web前端快速入门教程】 https://www.bilibili.com/video/BV1Rs4y127j8/?share_source=copy_web&vd_source=94c3d5330a46438059359e8dd2494fe9