v-model

概述

v-model 是一个用于实现双向数据绑定的指令。它可以将表单元素如：inpupt，textarea，select 的值与 Vue实例 中的数据进行绑定。使得用户输入的值能够自动更新到 Vue实例 中，并且 Vue实例 中的数据变化也会自动更新到页面中。

v-model

基本使用：

<template>
  <div>
    <input type="text" v-model="message" />
    <div>{{ message }}</div>
  </div>
</template>

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

v-model 实际上是由 v-bind 和 v-on 实现的语法糖。

上面例子中 input，实际上就是通过 v-bind 绑定了 value 属性，v-on 监听了 input 事件实现的。

<input type="text" v-on:input="(e) => message = e.target.value" :value="message"/>

v-model 为不同的输入元素使用不同的属性和事件:

• text 和 textarea 元素使用 value 属性 和 input 事件；
• checkbox 和 radio 使用 checked 属性 和 change 事件；
• select 字段将 value 作为属性 并将 change 作为事件。

一般 v-model 默认是采用 value 和 input 来绑定属性和事件。

修饰符

.number，输入的值转为数值类型。

<input v-model.number="age" type="number">

.trim，过滤用户输入的首尾空白字符。

<input v-model.trim="message">

.lazy，当 input 元素的 change 事件触发时，才会将最终的值更新 Vue实例 中。

<input v-model.lazy="message" />

在组件上使用 v-model

v-model 会默认绑定 value 属性和 input 事件。

父组件：

<my-input v-model="message"></my-input>

子组件：

// 接收父组件传过来的值。
props: ["value"]

// 触发父组件监听的 input 事件。
$emit("input");

子组件还可以在自身实例中通过 model 属性重写父组件为自身绑定的 v-model 属性和事件名。

// 和 data 同级。
model: {  
    prop: "myValue",  
    event: "myInput"  
}

// 接收值
props: ["myValue"]

// 触发事件
$emit("myInput");