Vue表单输入绑定v-model

表单输入绑定

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

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

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

    }

    </script>

运行结果：

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

<template>
    <h3>表单输入绑定</h3>
    <hr>
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox" >{{ checked }}</label>

    </template>
    <script>
     export default {
        data(){
            return{
             checked:true
            }
        }

    }

    </script>

运行结果：

修饰符
v-model 也提供了修饰符：.lazy ,.number , .trim
.lazy
默认情况下，v-model 会在每次input事件后更新数据。可以添加lazy修饰符来改为在每次change事件后更新数据。

<template>
    <h3>表单输入绑定</h3>
    <hr>
<input type="text" v-model.lazy="message" >
    <p>Message is: {{ message }}</p>

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

    }

    </script>

回车前

回车后：