vue学习笔记13-表单输入绑定

表单输入绑定

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

只要用户输入存在的地方基本离不开表单

input输入框

<template>
    <h3>表单输入绑定</h3>
    <form>
        <input type="text" v-model="message">
        <p>{{ message }}</p>
    </form>
</template>

<script>
export default {
    data(){
        return{
            message:""
        }
    }
}
</script>

 框中输入什么，下面同步显示什么

 百度搜索栏如下，输入什么同步读取，反馈数据

复选框

单一复选框，绑定布尔类型值

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

.lazy

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

.number

只接收数字类型

.trim

接收去掉空格