vue.js实现只能输入数字的输入框

实现只能输入数字的输入框可以通过如下步骤来完成：

步骤一：定义只允许输入数字的指令

在Vue.js中，我们可以通过定义指令来限制输入框的输入内容。下面是一个自定义的v-only-number指令，它可以确保输入框只接受数字：

<template>
  <div>
    <input v-only-number type="text">
  </div>
</template>

<script>
export default {
  directives: {
    onlyNumber: {
      bind: function (el) { // 定义该指令的行为
        el.handler = function (event) {
          if (!event.target.value.match(/^\d*$/)) {
            event.target.value = event.target.value.replace(/[^\d]/g, '');
          }
        };
        el.addEventListener('input', el.handler);
      },
      unbind: function (el) { // 移除事件监听
        el.removeEventListener('input', el.handler);
      }
    }
  }
}
</script>

在该指令中，我们定义了一个onlyNumber指令，并在el.handler函数中对输入框中输入的值进行过滤。如果该值不是数字，则通过正则表达式将其替换为一个空字符串。

将该指令绑定到输入框上，示例代码如下：

<input v-only-number type="text">

步骤二：使用内置指令实现只允许输入数字

除了自定义指令以外，Vue.js还提供了内置的v-model指令，我们可以通过修改该指令来限制输入框的输入内容。示例代码如下：

<template>
  <div>
    <input v-model="price" type="text" pattern="[0-9]*">
  </div>
</template>

<script>
export default {
  data() {
    return {
      price: ''
    }
  }
}
</script>

在上面的代码中，我们给输入框添加了一个pattern属性，用于限制输入的内容只能是数字。由于v-model指令将输入框的值与Vue.js组件的数据绑定在一起，因此输入框中输入的值会自动同步到组件的price属性中。在Vue.js中使用内置指令可以更加方便快捷，但是有时候也需要注意其兼容性问题。

上述两种方法都可以实现只能输入数字的输入框，具体使用哪种方法可以根据自己的需求和业务场景进行选择。