3. Vue 限制input输入 小数点后两位number
首先介绍一些input(表单元素)常见的type
| type | 类型说明 |
|---|---|
| text | - |
| button | - |
| number | 过滤非数值类型的值 |
| tel | 用于输入电话号码的控件 |
| file | - |
实现效果
仅输入数值类型的控件
// 禁止输入非数值类型的字符<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
3. Vue 限制input输入 小数点后两位number
首先介绍一些input(表单元素)常见的type
| type | 类型说明 |
|---|---|
| text | - |
| button | - |
| number | 过滤非数值类型的值 |
| tel | 用于输入电话号码的控件 |
| file | - |
实现效果
仅输入数值类型的控件
// 禁止输入非数值类型的字符<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