本来是在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. 11.2.0.4单实例DRCP(Database Resident Connection Pooling)简单测试

    DRCP配置及测试 一. DRCP介绍 数据库提供会话进程在数据库中使用资源的方式: 1)Dedicated Server,一个会话在数据库中对应一个专有进程,一对一服务(资源数据库占用过多,一般使用 ...

  2. linux列出目录下所有目录

    我的一个目录下有很多文件,但是我想列出该目录下所有的目录,并且删除 列出目录下所有的目录,常用的方法是ll配合管道命令,比如 ll | grep "^d" 通过对ll命令的输出,抓 ...

  3. [LeetCode&Python] Problem 860. Lemonade Change

    At a lemonade stand, each lemonade costs $5. Customers are standing in a queue to buy from you, and ...

  4. day03用户交互、基本数据类型、运算符

    用户交互 在实际应用中,我们经常需要用户输入相应信息,根据用户输入信息进行反馈,此时我们需要input/output信息 python中提供了便捷的输入方法input()和print() 在pytho ...

  5. POJ3090 Visible Lattice Points （数论：欧拉函数模板）

    题目链接:传送门 思路: 所有gcd(x, y) = 1的数对都满足题意,然后还有(1, 0) 和 (0, 1). #include <iostream> #include <cst ...

  6. 《DSP using MATLAB》Problem 5.12

    1.从别的地方找的证明过程: 2.代码 function x2 = circfold(x1, N) %% Circular folding using DFT %% ----------------- ...

  7. Nginx学习安装配置和Ftp配置安装

    什么是代理? 什么是正向代理? 什么是反向代理? Nginx与负载均衡有什么联系? 如何在centos7 中安装Nginx-------------安装配置---------------------- ...

  8. mongodb集群性能优化

    mongodb集群性能优化 在前面两篇文章,我们介绍了如何去搭建mongodb集群,这篇文章我们将介绍如何去优化mongodb的各项配置,以达到最优的效果. 警告 不做任何的优化,集群搭建完成之后,使 ...

  9. 使用distillery&&docker 部署phoenix 应用

      distillery 发布了2.0 了,有好多的新的功能 config prodiver 进行环境变量的配置 appup tansforms 插件系统,方便在release 构建的时候进行修改 m ...

  10. 高维数据的高速近期邻算法FLANN

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/jinxueliu31/article/details/37768995 高维数据的高速近期邻算法FL ...