本来是在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. 初学html的单词笔记

    font-size: 文字大小color: 顏色solid: 边框线text-align: 間距center: 文字放在中間<head> 网页头部<title> 网页标题< ...

  2. [MarkDown] markdown语法小结

    目录 写在前面 目录 特殊字符自动转换 段落和换行 第一阶标题 第二阶标题显示效果有下划线 H1 H2有下划线 H3 区块引用 列表 代码区块 分割线 链接 强调 删除线 代码 图片 反斜杠 表格 g ...

  3. Electron 快速入门

    https://www.w3cschool.cn/electronmanual/p9al1qkx.html

  4. 简单矩阵快速幂(HDU Tr A 1575)

    题目中所给的方阵就是一个矩阵,而就是只要将题目所给矩阵不断进行相乘即可,本题中我采用的是直接重载运算符*,使矩阵每一个都进行运算,可以简化为只对对角线上的元素进行运算.最后所得结果就只需将最终的矩阵上 ...

  5. acm 2084

    ////////////////////////////////////////////////////////////////////////////////#include<iostream ...

  6. (12)模板语言-with

    with的用处 当一个变量特别特别长,可以用with给这个变量重命名 views.py from django.shortcuts import render,HttpResponse def ind ...

  7. (5)MySQL的查询:模糊查询(通配符查询like)、限制符查询(limit)、排序查询(order by)、分组查询(group by)、(子查询)

    注意事项 指令语法的优先级: where > group by >order by > limit 例:select count(id) as cnt,age from tablen ...

  8. Go Example--协程

    package main import "fmt" func main() { //main gorouting中调用f函数 f("direct") //重新建 ...

  9. openresty router && template 试用

      router 是一个比较方便的 openresty 路由组件,我们可以用来编写灵活强大的 web 应用,类似的 lua-resty-route 也是很不错的,但是如果是比较简单的直接可以使用 lu ...

  10. IBM websphere MQ使用说明

    百度文库: IBM websphere MQ使用说明 IBM MQ安装和配置