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

项目代码