vmodel.lazy详解

看下面一段代码

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

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            msg: 123
        },
        methods: {
            show () {
                console.log(this.msg);
            }
        }
    })
</script>

查看运行效果

当改变输入框的值时，span中的值是同时变化的（注意光标还在输入框内）

 

 如果给v-model添加上.lazy修饰符

<div id="app">
    <input v-model.lazy="msg" @change="show">
    <span>{{msg}}</span>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            msg: 123
        },
        methods: {
            show () {
                console.log(this.msg)
            }
        }
    })
</script>

查看运行效果

 当改变输入框的值时，span中的值是不会变化的（注意光标还在输入框内）

 而当输入框失去焦点时，span中的值才会改变（注意光标不在输入框内）