表单输入绑定

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

xxxxxxxxxx
<template>
    <input type="text" v-model="message">
    <p>{{ message }}</p>
</template>
<script>
export default {
    data() {
        return {
            message:""
        }
    }
}
</script>

复选框

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

xxxxxxxxxx
<template>
    <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 事件后更新数据

xxxxxxxxxx
<template>
    <input type="text" v-model.lazy="message">
    <p>{{ message }}</p>
</template>
<script>
export default {
    data() {
        return {
            message:""
        }
    }
}
</script>

实时效果反馈

1. 下列那个是表单输入惰性属性：

A .lazy

B .number

C .trim

D .type

答案

1=>A