本来是在vue里发现获取不到 input[ type="number"]的值，就是输入两个小数点的数值，比如1.1.1，以为是vue的错误，然而不是，vue只做了数字处理

不明白为什么获取不到值还让输入两个小数点呢，这就尴尬了。

//vue里对输入的值做的处理
function toNumber (val) {

  var n = parseFloat(val);

  return isNaN(n) ? val : n;

}
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <div id="app">

　　　　　　当input的type=number时，当输入的数据有两个小数点的时候，比如1.1.1，此时获取不到this.msg的值

        <input type="number" v-model="msg" @input="check">

    </div>

    <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>

    <script>

    new Vue({

        el: '#app',

        data: {

            msg: '',

        },

        methods: {

            check(val) {

                console.log(this.msg, 'this.msg');

            }

        }

    })

    </script>

</body>

</html>

所以呢，输入时数字的时候，可以用input[type="text"],直接用正则验证数值.

input输入框type=number时的一个缺陷的更多相关文章

  1. 移除HTML5 input在type="number"时的上下小箭头

    /*移除HTML5 input在type="number"时的上下小箭头*/ input::-webkit-outer-spin-button, input::-webkit-in ...

  2. 移除input在type="number"时的上下箭头

    网页在有些情况下,会需要input的输入的为单纯数字的文本框,此时type=number,但使用type=number时,输入框后面会有一个上下箭头,那么如何去掉上下箭头呢? <input ty ...

  3. 去掉input在type="number"时右边的上下箭头

    加了代码之后: input::-webkit-outer-spin-button, input::-webkit-inner-spin-button{ -webkit-appearance: none ...

  4. 如何移除HTML5 input在type="number"时的上下小箭头

      在chrome下: input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{    -webkit-appearance ...

  5. 【转】移除HTML5 input在type="number"时的上下小箭头

    在chrome下: input::-webkit-outer-spin-button, input::-webkit-inner-spin-button{     -webkit-appearance ...

  6. input输入框type=file时accept中可以限制的文件类型（转载）

    转载自: input type=file accept中可以限制的文件类型 在上传文件的时候,需要限制指定的文件类型. <input type="file" accept=& ...

  7. 怎么去掉select的下拉箭头和输入框input类型为number时的上下箭头

    一.去掉select的下拉箭头 方法一:在select外面加一个div,设置select宽度大于div的宽度,并加一个超出隐藏属性overflow:hidden,小三角会隐藏掉: 方法二:给selec ...

  8. input type="number"时，maxlength不起作用怎么解决

    最近小颖在做公司的angular项目时,发现当input type="number"时,maxlength不起作用,百度了下解决方式,顺便记录下,以便后期查看嘻嘻 <inpu ...

  9. input输入框type设置为number，maxlength无效

    一个小细节,以前很少注意,直到最近做的一个项目,当我把一个输入数字的input框的类型设置为number时,input框还是可以无限输入,设置maxlengh=10就不起作用了.然后我就去百度了一下, ...

随机推荐

  1. 12.2 关闭DLM 自动收集统计信息 (SCM0)ORA-00600之[ksliwat: bad wait time]

    一.报错日志 db_alert ORA-: ??????, ??: [ksliwat: bad wait time], [], [], [], [], [], [], [], [], [], [], ...

  2. socket模块粘包现象理解以及解决思路

    粘包现象: 在socket网络程序中,TCP和UDP分别是面向连接和非面向连接的.因此TCP的socket编程,收发两端(客户端和服务器端)都要有成对的socket,因此,发送端为了将多个发往接收端的 ...

  3. 关系数据库（MySQL）的规范化、以及设计原则

    1.了解范式(NF) 为了使得关系数据库能够符合规范理论,所有的数据库表都要满足:范式. 关系数据库的范式有五类:第一范式,第二范式,....第五范式.下面我们来了解一下前三个范式: 第一范式:简单来 ...

  4. 学号 20155219 《Java程序设计》第1周学习总结

    学号 20155219 <Java程序设计>第1周学习总结 教材学习内容总结 JVM:是JAVA程序唯一认识的操作系统,其可执行文件为.class文档:具有让Java程序跨平台的功能.负责 ...

  5. 20155208徐子涵 2016-2017-2 《Java程序设计》第5周学习总结

    20155208徐子涵 2016-2017-2 <Java程序设计>第5周学习总结 教材学习内容总结 第八章 异常处理 8.1 语法与继承结构 Java中所有错误都会被打包为对象,运用tr ...

  6. Beta周第14次Scrum会议(11/23)【王者荣耀交流协会】

    一.小组信息 队名:王者荣耀交流协会 小组成员 队长:高远博 成员:王超,袁玥,任思佳,王磊,王玉玲,冉华 小组照片 二.开会信息 时间:2017/11/23 17:02~17:14,总计12min. ...

  7. PHP黑魔法（该篇文章转自：http://www.91ri.org/12634.html 目的是作为自己的笔记方便查找）

    那些年我们学过的PHP黑魔法 作者:Matrix_ling 序 这里必须得说一下==和===这俩货的重要性.==是比较运算,它不会去检查条件式的表达式的类型===是恒等,它会检查查表达式的值与类型是否 ...

  8. mongodb备份与还原

    mongodb单机: 备份所有的库: mongodump --host 10.10.7.33:27019 --gzip --out /home/mongodb/0415_bf 备份指定的库: mong ...

  9. Java打印水仙花数

    public class Test2 { public static void main(String[] args) { //水仙花 数 指的是一个三位数(100-999) //三位数本身= 百位数 ...

  10. Android 工具视频学习笔记_WDS

    1. 由于Android源码过于庞大,SourceInsight会经常卡死,不适合了.适合的是Android Studio, 非常好用.使用手册上有介绍如何安装. 编译安卓的过程说明手册中也有. 3. ...