vue 3.0 如何实现 文本框只能输入数字 避免文字和符号

**Vue3.0 实现文本框只能输入数字的方法**

在 Vue3.0 中，为了实现文本框只能输入数字的功能，我们可以使用自定义指令（Directive）或组合使用 `v-model` 和 `input`事件。下面我们将分别介绍这两种方法。

### 方法一：使用自定义指令首先，我们需要创建一个自定义指令，用于限制文本框输入的内容。新建一个文件 `directive.js`，并添加以下代码：

javascript// directive.jsexport default {
 name: 'only-num',
 inserted(el, binding) {
 const { value } = binding;
 el.addEventListener('input', (e) => {
 const { value: inputValue } = e.target;
 if (!/^d+$/.test(inputValue)) {
 e.preventDefault();
 }
 });
 },
};

在上面的代码中，我们定义了一个名为 `only-num` 的自定义指令。该指令监听 `input`事件，并使用正则表达式检查输入的内容是否为数字。如果不是数字，则阻止事件默认行为。

接下来，我们需要在 Vue 组件中应用这个自定义指令。例如，在 `App.vue` 中添加以下代码：

html<!-- App.vue -->
<template>
 <div>
 <input type="text" v-model="num" v-only-num />
 </div>
</template>

<script>
import onlyNumDirective from './directive';

export default {
 name: 'App',
 directives: { onlyNum: onlyNumDirective },
 data() {
 return {
 num: '',
 };
 },
};
</script>

在上面的代码中，我们应用了 `v-only-num` 指令到一个文本框上。这样，当用户输入非数字内容时，指令会阻止事件默认行为，从而实现文本框只能输入数字的功能。

### 方法二：使用 `v-model` 和 `input`事件除了使用自定义指令外，我们还可以使用 `v-model` 和 `input`事件来实现同样的效果。例如，在 `App.vue` 中添加以下代码：

html<!-- App.vue -->
<template>
 <div>
 <input type="text" v-model="num" @input="handleInput" />
 </div>
</template>

<script>
export default {
 name: 'App',
 data() {
 return {
 num: '',
 };
 },
 methods: {
 handleInput(e) {
 const { value } = e.target;
 if (!/^d+$/.test(value)) {
 this.num = value.replace(/[^0-9]/g, '');
 }
 },
 },
};
</script>

在上面的代码中，我们使用 `v-model` 来绑定文本框的值，并监听 `input`事件。然后，在 `handleInput` 方法中，我们检查输入的内容是否为数字。如果不是数字，则使用正则表达式替换非数字字符。

通过以上两种方法，我们可以实现 Vue3.0 中文本框只能输入数字的功能。