el-input格式化保留两位小数
时间: 2023-08-03 09:38:18 浏览: 194
El-Input组件也可以通过`format`属性来保留小数位数。具体步骤如下:
1. 在`el-input`中设置`v-model`来绑定输入框的值。
2. 设置`format`属性为一个函数,该函数会在输入框的值改变时触发。
3. 在`format`函数中对输入框的值进行格式化并返回格式化后的值,最后将该值赋给`v-model`绑定的变量。
例如,我们想要将输入框中的数值保留两位小数,可以按照如下方式操作:
```html
<template>
<el-input v-model="num" :format="formatNum"></el-input>
</template>
<script>
export default {
data() {
return {
num: ''
}
},
methods: {
formatNum(value) {
// 去除空格
value = value.replace(/\s/g, '')
// 将数值保留两位小数
value = parseFloat(value)
if (isNaN(value)) {
return ''
} else {
return value.toFixed(2)
}
}
}
}
</script>
```
在上面的代码中,我们首先在`el-input`中设置`v-model`来绑定输入框的值,然后设置`format`属性为一个函数`formatNum`,该函数会在输入框的值改变时触发。在`formatNum`函数中,我们先使用正则表达式去除输入框中的空格,然后将输入框中的值转换为数值类型并保留两位小数。最后,将格式化后的值返回并赋给`v-model`绑定的变量`num`。这样,当用户在输入框中输入数值时,输入框中的值就会自动被格式化为保留两位小数的形式。
阅读全文