Vue 限制input输入 小数点后两位number

首先给大家分享一个巨牛巨牛的人工智能教程，是我无意中发现的。教程不仅零基础，通俗易懂，而且非常风趣幽默，还时不时有内涵段子，像看小说一样，哈哈～我正在学习中，觉得太牛了，所以分享给大家！点这里可以跳转到教程

                    

3. Vue 限制input输入 小数点后两位number

首先介绍一些input(表单元素)常见的type

                       

type	类型说明
text	-
button	-
number	过滤非数值类型的值
tel	用于输入电话号码的控件
file	-

实现效果

仅输入数值类型的控件

// 禁止输入非数值类型的字符class="number__input" type="number" />
    
    
    
    

     
     
     
     
1
     
     
     
     
2
    
    
    
    

输入最多小数点后两位的数值控件

template

<div id="app">class="number__input" type="number" @input="oninput" :placeholder="placeholder"/>div>
    
    
    
    

     
     
     
     
1
     
     
     
     
2
     
     
     
     
3
     
     
     
     
4
    
    
    
    

javascript

let app = new Vue({    el: '#app',    data: {    placeholder: '请输入数值'  },  methods: {    oninput(e) {        // 通过正则过滤小数点后两位      e.target.value = (e.target.value.match(/^\d*(\.?\d{0,2})/g)[0]) || null        console.log('e',e.target.value)    }  }})
    
    
    
    

     
     
     
     
1
     
     
     
     
2
     
     
     
     
3
     
     
     
     
4
     
     
     
     
5
     
     
     
     
6
     
     
     
     
7
     
     
     
     
8
     
     
     
     
9
     
     
     
     
10
     
     
     
     
11
     
     
     
     
12
     
     
     
     
13
     
     
     
     
14
     
     
     
     
15
     
     
     
     
16
    
    
    
    

修改number 控件默认样式

/** 去除input输入框样式 */input[type=number]::-webkit-inner-spin-button {  -webkit-appearance: none;}.number__input {  border: 1px solid #ccc;}
    
    
    
    

     
     
     
     
1
     
     
     
     
2
     
     
     
     
3
     
     
     
     
4
     
     
     
     
5
     
     
     
     
6
     
     
     
     
7
     
     
     
     
8
    
    
    
    

项目代码

           

浏览人工智能教程