v-model修饰符.lazy详解
官网相关内容：
在默认情况下，v-model 在 input 事件中同步输入框的值与数据 (除了 上述 IME 部分)，但你可以添加一个修饰符 lazy ，从而转变为在 change 事件中同步：
|
<!-- 在 "change" 而不是 "input" 事件中更新 -->
<input v-model.lazy="msg" >
|
个人实践理解：
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详解相关推荐
- [vue] 说说你对vue的表单修饰符.lazy的理解
[vue] 说说你对vue的表单修饰符.lazy的理解 input标签v-model用lazy修饰之后,vue并不会立即监听input Value的改变,会在input失去焦点之后,才会触发input ...
- html+正则+换行+回车,正则与回车换行符使用详解
这次给大家带来正则与回车换行符使用详解,正则与回车换行符使用的注意事项有哪些,下面就是实战案例,一起来看一下. C#中,读取文本文件内容,里面往往有许多回车换行符("\r\n"), ...
- Diffusion model(二): 训练推导详解
接上文 Diffusion model(一): 公式推导详解 Diffusion model(二): 训练推导详解 Diffusion model(三): 公式结论 Diffusion的训练推导 1. ...
- Vue——v-model的三种修饰符lazy、number、trim
Vue--v-model的三种修饰符lazy.number.trim v-model.lazy:值修改操作完成之后才会发生变化. v-model.number:值修改时,保持其值为Number类型. ...
- Python 占位符格式化详解
Python 占位符格式化详解 占位符,顾名思义就是插在输出里站位的符号.占位符是绝大部分编程语言都存在的语法, 而且大部分都是相通的, 它是一种非常常用的字符串格式化的方式. 原文:https:// ...
- java中static修饰函数_详解java中static关键词的作用
在java中,static是一个修饰符,用于修饰类的成员方法.类的成员变量,另外可以编写static代码块来优化程序性能:被static关键字修饰的方法或者变量不需要依赖于对象来进行访问,只要类被加载 ...
- vue修饰符 .lazy .number .trim
.lazy 在输入框中,v-model 默认是同步数据,使用 .lazy 会转变为在 change 事件中同步 , 也就是在失去焦点 或者 按下回车键时才更新 <template>< ...
- 正则表达式中模式修正符作用详解（i、g、m、s、x、e）
正则表达式中常用的模式修正符有i.g.m.s.x.e等.它们之间可以组合搭配使用. 它们的作用如下: //修正符:i 不区分大小写的匹配; //如:"/abc/i"可以与abc或a ...
- 修饰符.lazy .number .trim
1.lazy v-model 在每次 input 事件触发后将输入框的值与数据进行同步,也就是在失去焦点或者按下回车键时才更新 <template><div><p> ...
- python中换行的转义符_详解Python中的各种转义符\n\r\t
Python中的各种转义符\n\r\t 转义符 描述 \ 续行符(在行尾时) \\ 反斜杠符号 ' 单引号 " 双引号 \a 响铃 \b 退格(Backspace) \e 转义 \000 空 ...
最新文章
- linux pcie热插拔驱动_Linux安装TLP-高级电源管理工具
- 【总结整理】数据可视化
- ASP.NET 缓存与SQL Server结合使用
- [leetcode] remove duplicate letters
- ArcGIS Engine基础开发教程(转)
- 【黑马程序员】————预处理指令2-文件编译
- 最新小白详细描述在centos7.5上安装python3并使用Nginx+virtualenv+supervisor来部署tornado项目（整理集合结合实际）系列2
- php的弹出窗口,弹出窗口 PHP
- MySQL优化（二）
- ViewPager2撸个3D画廊
- 罗斯柴尔德家族与人类的四次战争
- web SEO简单优化
- 一键获取推文封面及标题摘要
- Ubuntu14.04上安装calamari
- 数据分析学习技能树 | 养成数据分析师的品质和思维模式
- 加密php代码一担粮,分享8个PHP开发常用代码片段_后端开发
- 用c语言编写打猎小游戏,使用c语言编写简单小游戏.docx
- 苹果手机测试网络速度的软件,iPhone6怎么看网速？查看苹果6 Plus网速给不给力的方法...
- 基础面试题:java内存区域
- java改变鼠标图片_Java 将鼠标改为图片的两种方法