前言
在 Vue.js 中，响应式表单处理是非常重要的一部分。Vue.js 提供了很多强大的方式来处理表单输入，包括 v-model 指令和计算属性。本文将深入探讨 Vue.js 中的响应式表单处理，包括如何使用 v-model，如何处理复选框和单选按钮的选中状态，如何处理表单验证等。
v-model 指令
v-model 指令是 Vue.js 中最常用的表单输入绑定方式。它可以让我们将表单输入的值绑定到 Vue.js 实例的数据中，以达到双向绑定的效果。例如，我们可以将一个表单输入绑定到 Vue.js 实例的数据中：
-- -------------------- ---- -------
----------
-----
------ ----------------- ------------------ ---- ------------
----- ------- ------
------
-----------
--------
------ ------- -
------ -
------ -
-------- ---
--
--
--
---------在上面的例子中，我们将一个输入框绑定到了 Vue.js 实例的 message 数据中，使用 v-model 指令。当我们在输入框中输入值时，该值会实时更新到 Vue.js 实例的数据中，并且也会自动更新到页面中的展示部分。
复选框和单选按钮
在处理复选框和单选按钮时，我们需要注意一些细节。假设我们有以下表单：
-- -------------------- ---- -------
----------
-----
------ --------------- ------------------ --------
----
------ ------------ ----------- ----------------- ---
------ ------------ ----------- ----------------- ---
----
----------- -- ------- ------
---------- -- ------ ------
------
-----------
--------
------ ------- -
------ -
------ -
-------- ------
------- ---
--
--
--
---------在上面的例子中，我们使用了 v-model 指令来处理复选框和单选按钮的选中状态。对于复选框，v-model 指令绑定的是布尔值类型的 checked 属性。对于单选按钮，我们需要指定每个单选按钮的 value 属性，并将其绑定到一个变量中。这样当用户点击单选按钮时，Vue.js 会自动更新选中的变量。
表单验证
Vue.js 中的表单验证可以使用自定义指令和计算属性来实现。假设我们想要在输入框中输入大于 100 的数字时，显示一个错误信息，我们可以这样实现：
-- -------------------- ---- -------
----------
-----
------ ---------------------- ------------------ - -----------
-- ----------- - -------- ----- ---- -- ---- ---- --------
------
-----------
--------
------ ------- -
------ -
------ -
------ ---
--
--
--
---------在上面的例子中，我们使用了 v-model.number 来强制将输入值转换为数字类型。我们同时通过计算属性判断输入值是否大于 100，并动态显示错误信息。
有时候，我们可能需要实现更复杂的表单验证逻辑，例如验证必填项、验证邮箱地址等。这时候我们可以使用自定义指令来实现。自定义指令需要在 Vue.js 实例的 directives 中注册，例如：
-- -------------------- ---- -------
----------
-----
------ --------------- ------------------ ---- ----------
-- ----------------------------------------- ----- - ----- ----- ------------
------
-----------
--------
------ ------- -
------ -
------ -
------ ---
--
--
----------- -
----- -
------------ -
----------------------------- --- -- -
-------------------
-- -------------------- -
-------------------- ------------
-
---
--
--
--
--
---------在上面的例子中，我们实现了一个 email 自定义指令，并在其中监听表单的提交事件。当表单提交时，我们通过 $refs 获取到表单元素，并使用 el.checkValidity() 方法来判断表单是否有效。如果表单有效，我们调用 this.$emit('submit', this.email) 方法来触发 submit 事件，并传递 email 参数。
总结
Vue.js 为我们提供了很多强大的方式来处理表单输入。通过 v-model 指令和计算属性，我们可以实现表单数据的双向绑定、动态显示错误信息等。通过自定义指令，我们可以实现更复杂的表单验证逻辑。应用这些技巧，我们可以轻松优雅地处理各种表单输入，并让用户获得更好的体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64630e26968c7c53b0413ec3