表单输入绑定

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

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

复选框

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

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

<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

输入惰性属性：**

A .lazy

B .number

C .trim

D .type

答案

1=>A