技術標籤：vue

v-model一般是用在input輸入框的雙向資料繫結上

1.v-model不加.lazy修飾符：

<template>
  <div>
    <div>
      <input v-model="msg" @change="show">
      <span>{{msg}}</span>
    </div>
  </div>
</template>

<script>
export default {
  data
 
 () {
    return {
      msg: 李易峰
    }
  },
  methods: {
    show () {
      console.log(this.msg)
    }
  }
}
</script>

效果圖：

2.v-model加了.lazy修飾符後

<input v-model.lazy="msg" @change="show">

效果圖：

觸發change事件在控制檯列印：

總結：
當添加了.lazy修飾符後，雙向繫結的資料就不同步了，相當於在input輸入框失去焦點後觸發的change事件中同步