filter去约定输入框只能输入数字。

可以使用 Vue 的过滤器来限制输入框只能输入数字。具体实现如下：

1. 定义一个全局过滤器 `numberOnly`，在 `main.js` 中添加如下代码：

Vue.filter('numberOnly', function(value) {
  const regex = /[^0-9]/g;
  return value.replace(regex, '');
});

2. 在需要限制输入的数字输入框中使用 `v-model` 指令和 `numberOnly` 过滤器即可，例如：

<template>
  <div>
    <label>请输入数字：</label>
    <input type="text" v-model="num | numberOnly">
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: '',
    };
  },
};
</script>

这样，当用户在输入框中输入非数字字符时，输入框中的内容就会被自动过滤掉。注意，使用过滤器限制输入的数字只是在显示层面进行处理，而不是在数据层面进行处理，因此在提交表单时还需要对输入的数据进行验证。

相关问题

filter去约定输入框只能输入数字

可以使用 Vue 的过滤器来限制输入框只能输入数字。具体实现如下：

1. 定义一个全局过滤器 `numberOnly`，在 `main.js` 中添加如下代码：

Vue.filter('numberOnly', function(value) {
  const regex = /[^0-9]/g;
  return value.replace(regex, '');
});

2. 在需要限制输入的数字输入框中使用 `v-model` 指令和 `numberOnly` 过滤器即可，例如：

<template>
  <div>
    <label>请输入数字：</label>
    <input type="text" v-model="num | numberOnly">
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: '',
    };
  },
};
</script>

这样，当用户在输入框中输入非数字字符时，输入框中的内容就会被自动过滤掉。注意，使用过滤器限制输入的数字只是在显示层面进行处理，而不是在数据层面进行处理，因此在提交表单时还需要对输入的数据进行验证。

vue filter去约定输入框只能输入数字。

可以使用 Vue 的自定义指令 `v-decimal` 来限制输入框只能输入数字。具体实现如下：

1. 定义一个全局自定义指令 `v-decimal`，在 `main.js` 中添加如下代码：

Vue.directive('decimal', {
  bind(el) {
    el.handler = function(e) {
      const keyCode = e.keyCode || e.which;
      const allowedKeys = [8, 9, 37, 39, 46];
      if (allowedKeys.indexOf(keyCode) !== -1) {
        return;
      }
      const regex = /[0-9]|\./;
      if (!regex.test(String.fromCharCode(keyCode))) {
        e.preventDefault();
      }
    };
    el.addEventListener('keydown', el.handler);
  },
  unbind(el) {
    el.removeEventListener('keydown', el.handler);
  },
});

2. 在需要限制输入的数字输入框中添加 `v-decimal` 指令即可，例如：

<template>
  <div>
    <label>请输入数字：</label>
    <input type="text" v-decimal>
  </div>
</template>

这样，当用户在输入框中输入非数字字符时，输入框中的内容就会被自动过滤掉。