element表单中,人数输入框怎么限制只能输入正整数
这篇文章发布于 2020/10/08,归类于 Vue
标签:
element只能输入正整数
在人数这一栏,输入时,前端需要确保输入的只能是正整数,且不能是负数,且自动校正,来看看怎么实现
<template>
<div>
只能输入正整数: {{ peopleCount }}
<el-input
v-model="peopleCount"
@keyup.native="keyUp"
style="width:200px;margin:50px;"
></el-input>
</div>
</template>
<script>
export default {
data() {
return {
peopleCount: ""
};
},
methods: {
keyUp(e) {
// 非数字全部转换为''
e.target.value = e.target.value.replace(/[^\d]/g, "");
// 开始的0处理
if ([0, "0"].includes(e.target.value)) {
e.target.value = "";
}
this.peopleCount = e.target.value;
return e.target.value;
}
}
};
</script>
有了上面的思路后,对于万元输入框怎么限制只能输入最多保留两位小数点的number类型数据,可以思考下