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

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

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

实现效果

仅输入数值类型的控件

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

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

template

<div id="app">
<input 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

项目代码