community/vuejs_examples/form_handling

Vue.js 表单处理示例

在 Vue.js 中，处理表单是一个常见且重要的任务。以下是一些关于如何在 Vue.js 中处理表单的示例。

基本表单绑定

首先，你需要使用 v-model 指令来创建数据与表单输入之间的双向绑定。

<input v-model="username">

这里，username 是一个数据属性，它会自动与输入框的值保持同步。

表单验证

Vue.js 提供了一些内置的指令来帮助进行表单验证。

• v-model 可以与 v-bind 一起使用来为输入元素添加验证状态。
• v-if 和 v-else 可以用来显示或隐藏验证信息。

<input v-model="username" v-bind:class="{ 'is-invalid': !isValid }">
<div v-if="!isValid">用户名不能为空</div>

表单提交

处理表单提交通常涉及到使用 v-on:submit 或简写为 @submit 事件。

<form @submit.prevent="submitForm">
  <input v-model="username">
  <button type="submit">提交</button>
</form>

这里，submitForm 是一个方法，它将在表单提交时被调用。

示例代码

如果你想要查看一个完整的表单处理示例，可以访问这里。

Vue.js 表单示例