Vue 输入仅接受数字

Question

我希望文本输入仅接受数字序列。任何其他字符都应该被默默地忽略。这是我的组件的简化版本：

<template>
  <div id="app">
    <input :value="tel" @input="setTel" placeholder="only numbers" />
    <p>{{ tel }}</p>
  </div>
</template>

<script>
export default {
  name: "App",
  data: () => ({
    tel: "1234"
  }),

  methods: {
    setTel(v) {
      const val = v.target.value.replace(/[^0-9]/g, "");
      this.tel = val;
      /*this.tel = v.target.value = v.target.value.replace(/[^0-9]/g, "");*/
    }
  }
};
</script>

在React中，有受控组件的概念，但我在Vue中似乎没有类似的东西。

我找到的解决方法（你可以在评论中看到）是手动修改输入元素的值，但这有点违背了使用 Vue 的目的。

我也尝试过使用v-model，但问题仍然存在。

代码沙盒。

Answer 1

您可以做以下几件事：

• 将输入的类型设置为 number <input type=number。这将阻止用户输入除数字之外的任何字符。这是由浏览器处理的。
• 您可以使用v-model并添加一个侦听器@change来检查该值并相应地修改模型。您可以在模型上添加修饰符的节点number，以便 vue 将输入转换为数字`
• 使用像vuelidate这样的验证框架