vue 中的input输入框type=number时一个缺陷 -我爱编程

当前位置：: 首页; 文章; 前端
详情

vue 中的input输入框type=number时一个缺陷

前端
Easter79
0

本来是在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"],直接用正则验证数值.

免责申明：本站发布的内容（图片、视频和文字）以转载和分享为主，文章观点不代表本站立场，如涉及侵权请联系站长邮箱：xbc-online@qq.com进行反馈，一经查实，将立刻删除涉嫌侵权内容。