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

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

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

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

实现效果

仅输入数值类型的控件

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

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

template

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

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)
    }
  }
})

修改number 控件默认样式

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

项目代码