vue只能输入数字含小数

实现 Vue 输入框仅允许输入数字（含小数）
为了实现一个只接受数字（包括整数和小数）的 input 组件，在 Vue 中可以通过监听事件并过滤掉非法字符来达成目标。下面是一个具体的例子：
<template>
<div>
<!-- 使用 v-model 双向绑定数据 -->
<input type="text" v-model="numberInput" @input="filterNumber">
</div>
</template>

<script>
export default {
data() {
return {
numberInput: ''
};
},
methods: {
filterNumber(event) {
let value = event.target.value;

// 正则表达式用于匹配合法的小数值
const regex = /^-?\d*\.?\d{0,}$/;

if (!regex.test(value)) {
// 如果不符合正则，则恢复到之前的值
this.numberInput = value.slice(0, -1);
}
}
}
};
</script>
登录后复制
上述代码展示了如何创建一个简单的单文件组件，其中包含了一个文本类型的 <input> 元素[^1]。
通过使用 v-model 来双向绑定输入框的内容至 data() 函数中的变量 numberInput 上；每当用户改变输入框内的内容时会触发 @input 事件处理器 filterNumber 方法。该方法利用 JavaScript 的正则表达式验证新输入是否满足条件——即可以为空字符串、负号开头、任意数量的数字以及最多一个小数点后面跟随若干位数字的形式。如果不符合理想模式，则移除最后一位字符以保持原有状态不变。