首页 > 其他分享 >v-model的修饰符( .number .trim .lazy)

v-model的修饰符( .number .trim .lazy)

时间:2024-04-20 11:11:22浏览次数:17  
标签:trim lazy 修饰符 number 输入框 model

v-model的修饰符

 .number的作用是将绑定的值从string类型变为number类型

 在上述代码中,我们在input元素绑定了blur事件,作用为当鼠标移出当元素,触发该事件去响应方案

 可以看到在鼠标移出后,控制台打印的number类型为string

当我们再v-model后加上修饰符.number后

 控制台输出为number

 使用.number修饰符,输入含除数字外的内容

当输入以数字带头,会自动舍弃一直为数字后的内容

 

当数字以英文字母,或汉字开头,为全部内容

 trim修饰符:去除掉数据的前后空格,中间的空格不去掉

举例效果不明显,不做举例

lazy修饰符:当鼠标移出了输入框后,才会触发事情,和change类似

当没有用lazy修饰符时,

 当我们再输入框输入内容时,其他元素的绑定的值也会跟着变化

 

当我们使用lazy修饰时,

 

当我们离开这个输入框时,其他元素的值才会发生变化

所以lazy监听change事件,而不是input

change事件和input的触发区别

 

标签:trim,lazy,修饰符,number,输入框,model
From: https://www.cnblogs.com/123-hh/p/18147475

相关文章

  • day12_我的Java学习笔记 (package包、权限修饰符_private+缺省+protected+public、fin
    1.包IDEA配置自动导包:2.权限修饰符同一个类中的,【private、缺省、protected、public】都可以访问同一个包中的其他类,【private】不可以访问,【缺省、protected、public】都可以访问不同包下的无关类,【private、缺省、protected】都不可以访问,只有【public......
  • <lazy-image>
    <lazy-image>......
  • WPF的TextTrimming的属性
    WPF的TextTrimming="CharacterEllipsis"是一种文本修剪方式,用于在文本长度超过容器宽度时省略文本。它会在文本末尾添加省略号(...),同时保留尽可能多的字符。这种修剪方式通常用于UI设计中,以避免文本溢出并保持视觉美观。可以通过设置TextTrimming属性来指定文本的截断方式:Tex......
  • sqlalchemy relationship lazy属性
    'select' (默认):懒加载(LazyLoading):当访问与父对象关联的子对象集合或单个对象属性时,才会触发一次SQL查询,从数据库中获取相关数据。这是最常用的加载策略,因为它延迟了数据的获取,直到真正需要时才执行查询,有助于减少不必要的数据库交互。'joined':连接加载(Joi......
  • 神奇!autoTrimCurve(curve,parameter1)中参数parameter1的意义
    autoTrimCurve命令解释使用python进行ABAQUS二次开发时,建立草图用到自动裁剪命令,rpy文件中记录的是s.autoTrimCurve(curve1=g[4],point1=(-12.5237464904785,0.153462409973145))关键词 point1需要输入曲线上某点的坐标值,即一对浮点数由于我的需求大量参数化建模,每次生......
  • ida数据提取技巧-利用LazyIDA插件实现一键提取无法识别的字符串
    首先具体介绍一下这个技巧的意思,因为标题可能没有说的很明白在使用ida逆向分析的过程中,会遇到某些密文、密钥之类的字符串,而这些字符串往往不全是由正常字符组成的,其中存在一些非常规字符,而一旦ida在识别字符串的过程识别到这种字符,就会认为该字符串到此已经结束(但我们知道,字......
  • 『VUE』10. 事件修饰符(详细图文注释)
    目录什么是事件修饰符?vuejs不使用修饰符原生js实现禁用事件对象的默认事件使用事件修饰符.prevent使用事件修饰符.stop使用事件修饰符.self欢迎关注『VUE』专栏,持续更新中欢迎关注『VUE』专栏,持续更新中什么是事件修饰符?vue在Vue.js中,事件修饰符......
  • Java访问修饰符
    四种访问修饰符范围访问级别访问控制修饰符同类同包子类不同包公开 public允许允许允许允许受保护protected允许允许允许不允许默认 没有修饰符允许允许不允许不允许私有private允许不允许不允许不允许注意事项修饰符可以用来修......
  • Java 修饰符
    Java语言提供了很多修饰符,主要分为以下两类:访问修饰符非访问修饰符修饰符用来定义类、方法或者变量,通常放在语句的最前端。我们通过下面的例子来说明:publicclassclassName{//...}privatebooleanmyFlag;staticfinaldoubleweeks=9.5;protectedstaticfin......
  • react-lazy-load-image-component
    react-lazy-load-image-component1.6.0 • Public • Published 10monthsago ReadmeCode Beta2Dependencies343Dependents30VersionsReactLazyLoadImageComponentReactComponenttolazyloadimagesandothercomponents/elements.SupportsI......