本来是在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. MongDB篇，第一章：数据库知识1

    MongDB    数据库知识1 程序 =  数据结构 + 算法 数据存储阶段 1,文件管理阶段 (.txt .doc .xls) 优点: 数据可以长期保存:可以存储大量的数据:使用简单     缺点 ...

  2. 百练6376-二维数组右上左下遍历-2015正式C题

    C:二维数组右上左下遍历 总时间限制:  1000ms 内存限制:  65536kB 描述 给定一个row行col列的整数数组array,要求从array[0][0]元素开始,按从左上到右下的对角线顺 ...

  3. Java中double转BigDecimal的注意事项

    先上结论:不要直接用double变量作为构造BigDecimal的参数! 线上有这么一段Java代码逻辑: 1,接口传来一个JSON串,里面有个数字:57.3. 2,解析JSON并把这个数字保存在一个 ...

  4. AE1

    i2.1 导入四种方式: 1.文件->导入 2.项目窗口空白区域双击 3.空白区域右键 4 ctrl+i 常用键: ctri+i    ctrl shift  alt delete 2.2移动属 ...

  5. HPU第四次积分赛-L：A Winged Steed（完全背包）

    A Winged Steed 描述 有n种千里马,每一种都有若干匹,第i种马的颜值ai​,价格di​.现有m个牧马人要去挑选千里马,每一位牧马人对马的颜值都有要求:{所选马的颜值总和} ⩾Ai​.现在 ...

  6. 2017年秋软工-PSP总结报告

    一.回顾1 回顾本学期第一次作业[https://edu.cnblogs.com/campus/nenu/SWE2017FALL/homework/876]. ==>本学期我的第一次作业博客[h ...

  7. linux 的IP配置和网络问题的排查

    1.6  IP的配制, 首先要会用: ifconfig  和加相关参数如: ifconfig -a, 来查看,自己的电脑网络配制. 再次就必需要知道,默认IP配制文件的地方: cd /etc/sysc ...

  8. 如何解决VMware 12 安装Ubuntu 16.04时无网络连接问题

    刚安装玩Ubuntu,打开后上网没有网络连接 ,点击右上角的数据连接,显示已经启动联网,但是用火狐还是无法上网: 解决方法如下: 先查看虚拟机的网络适配器:点击虚拟机左上角的编辑,里面有个网络适配器 ...

  9. YIT-CTF—Web

    一:背后 打开传送门——>查看网页源代码——>1b0679be72ad976ad5d491ad57a5eec0——>用MD5解密 二:一种编码 [][(![]+[])[+[]]+([ ...

  10. 【mysql】索引原理-MySQL索引原理以及查询优化

    转载:https://www.cnblogs.com/bypp/p/7755307.html 一.介绍 1.什么是索引? 一般的应用系统,读写比例在10:1左右,而且插入操作和一般的更新操作很少出现性 ...