详解v-model修饰符.lazy

官网相关内容：
v-model指令用来在input、select、text、checkbox、radio等表单控件上创建双向数据绑定。根据控件的类型v-model自动选取正确的方法更新元素。

v-model指令没有使用.lazy修饰

1. v-model指令没有使用.lazy修饰符时,vue文件中的内容如下：

<template>
  <div>
    <div>
       <input v-model="msg" @change="show">
      <span>{{msg}}</span>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      msg: 123
    }
  },
  methods: {
    show () {
      console.log(this.msg)
    }
  }
}
</script>

效果图：

v-model指令使用.lazy修饰符

2. v-model指令使用.lazy修饰符时,vue文件中的内容如下：

<template>
  <div>
    <div>
      <input v-model.lazy="msg" @change="show">
      <span>{{msg}}</span>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      msg: 123
    }
  },
  methods: {
    show () {
      console.log(this.msg)
    }
  }
}
</script>

效果图：

结论：当添加.lazy修饰符之后，改变input框中的内容并不会使得span中的内容发生变化，此时当输入框失去焦点后触发change事件.控制台中输出相应内容。