首页 > 其他分享 >VUE input允许数字 且两位小数

VUE input允许数字 且两位小数

时间:2023-08-24 14:33:37浏览次数:34  
标签:VUE 数字 number replace only 小数点 input 小数

页面:
<el-input @keyup.native="onlyNumber()" placeholder="请输入(整数或者小数)金额" v-model="form.ysje"></el-input>
方法: onlyNumber() { this.form.ysje = this.onlyNumOnePoint(this.form.ysje); },
onlyNumOnePoint(number_only) {
//先把非数字的都替换掉,除了数字和小数点
number_only = number_only.replace(/[^\d.]/g, "");
//必须保证第一个为数字而不是小数点
number_only = number_only.replace(/^\./g, "")
//保证只有出现一个小数点而没有多个小数点
number_only = number_only.replace(/\.{2,}/g, ".");
//保证小数点只出现一次,而不能出现两次以上
number_only = number_only.replace(".","$#$").replace(/\./g, "").replace("$#$", ".");
//保证只能输入两个小数
number_only = number_only.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3'); return number_only; },

标签:VUE,数字,number,replace,only,小数点,input,小数
From: https://www.cnblogs.com/jahoon/p/17654045.html

相关文章

  • Vue【原创】下划线动态效果按钮,一般按钮模式,开关切换模式。
     1.lilo-icon-button一般按钮模式:1<template>2<divclass="icon-button":style="{color:font.color}"@click="onclick">3<i:class="[icon.type]":style="{color:icon.color,font......
  • vuedraggable和vue-fragment冲突导致连续多次拖拽报错问题
    项目中使用了vuedraggable实现拖拽功能。同时为了不产生多余标签,引入了vue-fragment。在连续多次拖动之后,总是报错。 解决办法:卸载vue-fragment。如果不想引入多余的标签,可以直接使用<template>,而且<template>标签是标准的HTML标签,更具可移植性。......
  • Vue3 中 keepAlive 如何搭配 VueRouter 来更自由的控制页面的状态缓存?
    在vue中,默认情况下,一个组件实例在被替换掉后会被销毁。这会导致它丢失其中所有已变化的状态——当这个组件再一次被显示时,会创建一个只带有初始状态的新实例。但是vue提供了keep-alive组件,它可以将一个动态组件包装起来从而实现组件切换时候保留其状态。本篇文章要介绍的......
  • Vue【原创】千位符输入框(不仅只是过滤器哦)
    最近和一个做金融的朋友讨论到千位符输入的问题,后来一想貌似自己项目中也会经常碰到金额数字这种输入框,要么自己做一个吧。首先肯定要有一个正则表达式,也就是过滤器的方案里面常用的正则:1filters:{2_toThousandFilter(str,that){3returnthat._toN......
  • 创建web应用程序,React和Vue怎么选?
    React和Vue都是创建web应用程序的绝佳选择。React得到了科技巨头和庞大的开源社区的支持,代码库可以很大程度地扩展,允许你创建企业级web应用程序。React拥有大量合格甚至优秀的开发人员粉丝,可以解决你在开发阶段可能遇到的任何问题。毫无疑问,React是创建跨平台解决方案的最佳框架......
  • vue--day69---vuex
    1. vuex是什么概念:专门在Vue中实现集中式状态(数据)管理的一个Vue插件,对vue应用中多个组件的共享状态进行集中式的管理(读/写),也是一种组件间通信的方式,且适用于任意组件间通信。2. 什么时候使用Vuex1.多个组件依赖于同一状态2.来自不同组件的行为需要变更同一状态......
  • vue--day68--插槽的总结
    ##插槽1.作用:让父组件可以向子组件指定位置插入html结构,也是一种组件间通信的方式,适用于<strongstyle="color:red">父组件===>子组件</strong>。2.分类:默认插槽、具名插槽、作用域插槽3.使用方式:   1.默认插槽:   ```vue   父组件中:    ......
  • vue--day67--作用域插槽
    1.App.vue <template><divclass="container"> <Categorytitle="游戏"><templatescope="atgui"><ul><liv-for="(g,index)inatgui.games":key="i......
  • mybatis 报错:Cause: java.lang.NumberFormatException: For input string: "java"
    1、所错图示:2、为什么包这样的错误?在if查询条件的逻辑没有错,其实在代码转换解析时,自动转换类型了,是代码在转换解析时异常。<!--where与if配合使用--><selectid="selectBlogIfWhere"resultType="blog"parameterType="blog"><includerefid="commBlog"></in......
  • Vue和JSP的区别
    JSP简化的Servlet设计,在HTML标签中嵌套Java代码,用以高效开发Web应用的动态网页JSP 全名为 Java Server Pages,中文名叫 java 服务器页面,其根本是一个简化的 Servlet 设计,它是由Sun Microsystems 公司 倡导、许多公司参与一起建立的一种动态网页技术标准。JSP 技术是在传......