v-model修饰符.lazy详解

本文主要是介绍v-model修饰符.lazy详解，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

官网相关内容：

在默认情况下，v-model 在 input 事件中同步输入框的值与数据 (除了 上述 IME 部分)，但你可以添加一个修饰符 lazy ，从而转变为在 change 事件中同步：

 

个人实践理解：

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: 123
    }
  },
  methods: {
    show () {
      console.log(this.msg)
    }
  }
}
</script>

效果图：

 

结论：

v-model是双向绑定的，所以当改变input框中的值的时候，span中的内容随之改变而改变。

2.当v-model使用.lazy修饰符时：

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

效果图：

 

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

 

小结：加上.lazy后相当于 双向数据绑定不起作用了

这篇关于v-model修饰符.lazy详解的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---