在开发前端页面中，我们常常会需要限制用户输入的内容类型，如只能输入数字。Vue.js 是当下非常流行的前端框架之一，本文将介绍如何在 Vue.js 中实现只能输入数字的 input 框。
步骤
- 定义 input 组件
首先，在 Vue.js 中定义一个 input 组件：
-- -------------------- ---- -------
----------
------ --------------- ---------------------
-----------
--------
------ ------- -
------ -
------ -
------ --
--
--
-------- -
------------------ -
----- ---------- - ------------------------------------- ----
---------- - -----------
------------------- ------------
-
-
--
---------在组件中，我们定义了一个 value 变量，用于保存用户输入的值。在 input 框中使用了 v-model 指令，可以实现数据的双向绑定。
同时，我们在 input 框上绑定了一个 @input 事件，当用户输入内容时会触发该事件。在 handleInput 方法中，我们使用正则表达式替换非数字内容为空字符串，并将结果赋值给 value 变量。最后，我们使用 $emit 方法触发了一个 input 事件，并将输入框的值传递出去。
- 使用 input 组件
在 Vue.js 中使用我们刚刚定义的 input 组件很简单。只需要在模板中使用如下代码即可：
-- -------------------- ---- -------
----------
-----
------------- -----------------
------------- ------ ------
------
-----------
--------
------ ----------- ---- -------------------------------
------ ------- -
----------- -
-----------
--
------ -
------ -
------- --
--
-
--
---------在模板中，我们首先导入了刚刚定义的 InputNumber 组件，然后在 components 中注册该组件。在 data 中定义了一个 number 变量，用于保存用户输入的数字。
在模板中，我们直接使用 InputNumber 组件，并使用 v-model 指令将 number 变量与组件进行双向绑定。这样，当用户在输入框中输入数字时，number 变量也会随之更新。
效果展示
在浏览器中打开页面，输入框只能输入数字，其他字符将自动被过滤。当输入框中有内容时，页面上会显示当前输入的数字。效果如下图所示：
总结
通过上面的步骤，我们已经成功地实现了只能输入数字的 input 组件。这对于开发需要限制用户输入内容类型的应用非常有用。
本文介绍了如何使用 Vue.js 自带的指令和事件，实现了只能输入数字的 input 框的功能。同时，我们也展示了如何将这个功能封装成一个组件，并在其他页面中使用该组件。
希望本文能对你在 Vue.js 开发中遇到的类似问题提供一些帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646db62c968c7c53b0c59172