Vue v-model lazy修饰符

Vue v-model lazy教程

Vue v-model 指令默认会在 input 事件中加载输入框中的数据（中文输入法中输入拼音的过程除外）。

我们可以使用 Vue v-model lazy 修饰符实现懒加载，让其只在 change 事件中再加载输入框中的数据，即只有在输入框失去焦点或者按回车键时才会更新 Vue 实例中的值。

案例

Vue v-model lazy修饰符

<!DOCTYPE html>
<html>
<head>
	<title>Vue v-model lazy修饰符</title>
	<script type="text/javascript" src="./lib/vue-2.6.10.min.js"></script>
</head>
<body>
	<div id="app">
		<input type="text" style="width:500px" v-model.lazy="message">
		<p>{{message}}</p>
        <p>嗨客网（www.haicoder.net）</p>
	</div>
</body>
<script>
	var v1 = new Vue({
	    el:"#app",
	    data:{
	        message:"Hello HaiCoder",
	    }
	})
</script>
</html>

浏览器运行效果如下图所示：

23 vue vmodel lazy .png

我们看到，使用 Vue v-model lazy 修饰符，同样可以实现数据的双向绑定。在不使用 Vue v-model lazy 修饰符时，我们在表单中修改数据时，表单下面的 p 标签里面的元素的值会随着表单元素的值一起变化。

我们使用了 Vue v-model lazy 修饰符时，只有当我们输入完成 input 失去焦点时，表单下面的 p 标签的值才会发生变化。

Vue v-model lazy修饰符总结

使用 Vue v-model lazy 修饰符可以实现懒加载，即只有在输入框失去焦点或者按回车键时才会更新 Vue 实例中的值。