首页 > 其他分享 >三种常用的Vue表单修饰符使用场景...

三种常用的Vue表单修饰符使用场景...

时间:2022-10-29 00:55:34浏览次数:102  
标签:trim ... lazy Vue 修饰符 number model 输入

vue的项目开发中须知道的三个vue表单修饰符(.lazy, .number, .trim)

1,.lazy

  • 简单地说:我们在input输入框输入的时候,标签里的内容会实时变化,加了.lazy修饰符后,只有当鼠标光标离开input输入框,标签的内容才会变化---官方文档

2,.trim

  • 如果要自动过滤用户输入的首尾空白字符,可以给v-model添加trim修饰符:

3,.number

  • 如果想自动将用户的输入值转为数值类型,可以给v-model添加number修饰符:如果v-model不加.number ,那么即使你输入的是number,但其实它是字符串

  • 加了number之后 ,如果你先输入数字,那它就会限制你输入的只能是数字,后面在输入字符串就不会显示;如果先输入字符串,那么.number就没有效果了

标签:trim,...,lazy,Vue,修饰符,number,model,输入
From: https://www.cnblogs.com/mahmud/p/16837931.html

相关文章

  • 2 类成员 访问修饰符 方法 参数 out ref params 命名参数 可选参数
    目录类=1类的概述2类成员2.1字段1显示和隐示字段初始化2.2为数据分配内存3访问修饰符私有访问和公有访问从类中访问私有方法方法=1方法1.1本地变量1.2类型推断和va......
  • 5 访问修饰符 抽象类 抽象成员 密封类 静态类 扩展方法 命名约定
    目录访问修饰符抽象成员抽象类密封类静态类扩展方法命名约定访问修饰符所有声明在类中的成员都是可见的,无论他们的访问性如何。继承的成员对派生的成员可以是可见的,也......
  • 【Vue3】provide和inject 依赖与注入
    provide与inject依赖注入vue3中使用setup语法糖与vue2的provide与inject的区别还是挺大的,这里不讨论vue3的配置项写法。vue2的可以参考学习之前的vue2的provide与inject......
  • 学习vue
    vue1、开发环境准备安装nodehttps://nodejs.org/en/安装Vue工具VueCLi安装命令:npminstall-g@vue/cli安装之后查看vue--versionvue官网:https://c......
  • vue项目环境搭建
    一:安装nvm(之前都是先安装node.js,但后来我发现nodejs版本到v18.7.0后启动项目报错digitalenveloperoutines::unsupported,所以我建议安装nvm)注意事项1.不能安装任何node......
  • 搭建一个node+vue的项目
    一.使用express搭建一个服务//1.导入expressconstexpress=require('express')//2.调用express函数,它的返回值就是服务器的实例constapp=express()//TODO_01配置......
  • 今天,念念不忘一件事... ✅FastJson在调用JSON#toJSONString时,如何截取比较长的value串
    项目里前后端页面的http请求及dubbo服务间的RPC调用,返回值类型统一是一个Result<T>,其结构如下。@DatapublicclassResult<T>implementsSerializable{priv......
  • Vue--动态路由
    router.addRouter的基础用法静态路由constroutes=[{path:'/',name:'Login',component:()=>import(/*webpackChunkName:"abou......
  • Vue--创建项目及自己配置路由
    1).创建项目vuecreatemyapp022).添加一个配置文件vue.config.jsmodule.exports={lintOnSave:false,devServer:{port:8080}}3).启动项目yarns......
  • Vue--Tab栏切换(父子组件间传值实现)
    一、实现原理:子组件配置props属性接受父组件传来的index值,top子组件采用this.$emit方法传index值给父组件二、HTML代码:<divclass="box"><my-top@xxx="fnChange">......