本来是在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. pycharm远程服务器进行调试

    背景是这样的:我有一台远程的服务器,以及一台本地的电脑:现在我想用远程的服务器上的python编译器来运行代码,怎么办?通用的做法是ssh服务器,vim代码,之后python运行文件,但是如果遇到调试 ...

  2. lecture7图像检索-七月在线-cv

    http://blog.csdn.net/u014568921/article/details/52518587 图像相似性搜索的原理 BOW 原理及代码解析 Bag Of Visual Words ...

  3. C++学习（二十五）（C语言部分）之 结构体2

    基本概述: int double char; 定义一个学生类型 int Student 姓名 性别 年龄 简单地说 结构体是一个可以包含不同类型的结构,他是一个自定义的类型. struct 结构体标识 ...

  4. 组合数的求法　（n<=1e8　可以过来看）

    C(n,m) =n!/(m!* (n-m)!  ); o(n) 求 1-m的逆元 o(n) 求 n的阶乘 代码实现 https://www.cnblogs.com/linyujun/p/5194189 ...

  5. python------模块定义、导入、优化 ------->Yaml, l模块

    一. yaml模块 用来做配置文件. 需要pip安装该包. 二. ConfigParser模块 用来生成和修改常见配置文件,在python3.x版本中更名为configparser. (什么是配置文件 ...

  6. mod libs 课堂

    name1= input("请输入一个名字:") name2 = input("再输入一个名字:") print("{}刚化妆完\n就被路过的{}拍照 ...

  7. c# 多线程 读写分离

    class Program { private static ReaderWriterLockSlim _LockSlim = new ReaderWriterLockSlim(); private ...

  8. /dev/null简单入门

    2>&1 /dev/null 将标准输入输出全部丢弃(表示2的输出重定向等同于1) 2>filename 把错误信息保存到filename 2>/dev/null >/ ...

  9. drone secret 使用

      drone 的secret 可以让我们方便的对于需要保密的信息的隐藏,减少账户信息的泄密 环境准备 docker-compose 文件 version: '3' services: drone-s ...

  10. 初等数论及其应用 (第6版) (Kenneth H.Rosen 著)

    第1章 整数 1.1 数和序列 1.2 和与积 1.3 数学归纳法 1.4 斐波那契数 1.5 整除性 第2章 整数的表示法和运算 2.1 整数的表示法 2.2 整数的计算机运算 2.3 整数运算的复 ...