AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

听说在 Vue 3 中实现动态表单很难？作为一个前端开发者，表示一切都是小意思！！

2024-08-09 57
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 听说在 Vue 3 中实现动态表单很难？作为一个前端开发者，表示一切都是小意思！！

最近，我的老板给我布置了一个任务：实现一个用户可以随时增删字段的动态表单。

你知道的，作为一个前端开发者，我平时和表单关系可不算好，这次的任务无疑是向我发起了挑战。于是，我带上了 Vue 3 这个利器，开始了我的动态表单征程。

接下来，我会带着大家一起从入门到精通，深入了解如何在 Vue 3 中实现动态表单。

介绍

动态表单是一种允许用户根据需求动态调整表单字段的表单。利用 Vue 3 的响应式特性和组件系统，我们可以轻松实现这一需求。

本文将带你从基础概念开始，一步步实现一个支持动态添加、删除和验证的表单，并介绍一些高级技巧。

432c5d81fc2bad2bdd8ecca0a81d856d.png

基础概念

在实现动态表单之前，我们需要理解以下基础概念：

  • • Vue 3 响应式系统：Vue 3 使用 Proxy 实现响应式系统，使得数据变化可以自动更新视图。
  • • 组件：Vue 组件是构建 Vue 应用的基本单元，通过组件化可以提高代码的复用性和可维护性。
  • • 表单绑定：通过 v-model 指令可以轻松地实现表单输入与数据的双向绑定。

实现步骤

项目初始化

首先，我们需要初始化一个 Vue 3 项目。如果你还没有安装 Vue CLI，可以通过以下命令安装：

npm install -g @vue/cli

然后，创建一个新的 Vue 项目：

vue create dynamic-form
cd dynamic-form

选择默认配置或者根据自己的需求进行配置。创建完成后，进入项目目录并启动开发服务器：

npm run serve

创建基础表单组件

接下来，我们创建一个基础表单组件。首先，在 src/components 目录下创建一个 BaseForm.vue 文件，并添加以下内容：

<template>
  <div>
    <form @submit.prevent="handleSubmit">
      <div v-for="(field, index) in fields" :key="index" class="form-group">
        <label :for="`field-${index}`">{{ field.label }}</label>
        <input
          v-model="field.value"
          :type="field.type"
          :id="`field-${index}`"
          class="form-control"
        />
        <button type="button" @click="removeField(index)">删除</button>
      </div>
      <button type="button" @click="addField">添加字段</button>
      <button type="submit">提交</button>
    </form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      fields: [
        { label: '姓名', type: 'text', value: '' },
        { label: '邮箱', type: 'email', value: '' },
      ],
    };
  },
  methods: {
    addField() {
      this.fields.push({ label: '新字段', type: 'text', value: '' });
    },
    removeField(index) {
      this.fields.splice(index, 1);
    },
    handleSubmit() {
      console.log('表单数据:', this.fields);
    },
  },
};
</script>
<style>
.form-group {
  margin-bottom: 1rem;
}
</style>

动态添加表单字段

在上述基础表单组件中，我们已经实现了添加字段的功能。通过点击“添加字段”按钮，我们可以在表单中动态添加新的字段。

<button type="button" @click="addField">添加字段</button>

对应的方法如下：

methods: {
  addField() {
    this.fields.push({ label: '新字段', type: 'text', value: '' });
  },
}

动态删除表单字段

同样地，我们还可以实现动态删除表单字段的功能。每个字段旁边都有一个“删除”按钮，点击后即可删除该字段。

<button type="button" @click="removeField(index)">删除</button>

对应的方法如下：

methods: {
  removeField(index) {
    this.fields.splice(index, 1);
  },
}

表单验证

为了提高表单的可靠性，我们需要在提交表单时进行验证。下面是一个简单的验证示例，确保每个字段都已填写。

methods: {
  handleSubmit() {
    const isValid = this.fields.every(field => field.value.trim() !== '');
    if (!isValid) {
      alert('所有字段均为必填项');
      return;
    }
    console.log('表单数据:', this.fields);
  },
}

高级技巧

在基础实现的基础上，我们还可以通过一些高级技巧来增强表单的功能。

使用动态组件

在某些情况下，我们可能需要根据字段类型动态渲染不同的表单控件。可以使用 Vue 的 component 组件来实现这一点。

<template>
  <div>
    <form @submit.prevent="handleSubmit">
      <div v-for="(field, index) in fields" :key="index" class="form-group">
        <label :for="`field-${index}`">{{ field.label }}</label>
        <component
          :is="getComponent(field.type)"
          v-model="field.value"
          :id="`field-${index}`"
          class="form-control"
        ></component>
        <button type="button" @click="removeField(index)">删除</button>
      </div>
      <button type="button" @click="addField">添加字段</button>
      <button type="submit">提交</button>
    </form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      fields: [
        { label: '姓名', type: 'text', value: '' },
        { label: '邮箱', type: 'email', value: '' },
        { label: '描述', type: 'textarea', value: '' },
      ],
    };
  },
  methods: {
    addField() {
      this.fields.push({ label: '新字段', type: 'text', value: '' });
    },
    removeField(index) {
      this.fields.splice(index, 1);
    },
    handleSubmit() {
      const isValid = this.fields.every(field => field.value.trim() !== '');
      if (!isValid) {
        alert('所有字段均为必填项');
        return;
      }
      console.log('表单数据:', this.fields);
    },
    getComponent(type) {
      const components = {
        text: 'input',
        email: 'input',
        textarea: 'textarea',
      };
      return components[type] || 'input';
    },
  },
};
</script>
<style>
.form-group {
  margin-bottom: 1rem;
}
</style>

表单数据持久化

为了防止页面刷新导致表单数据丢失，我们可以将表单数据持久化到本地存储中。

created() {
  const savedFields = localStorage.getItem('fields');
  if (savedFields) {
    this.fields = JSON.parse(savedFields);
  }
},
methods: {
  addField() {
    this.fields.push({ label: '新字段', type: 'text', value: '' });
    this.saveFields();
  },
  removeField(index) {
    this.fields.splice(index, 1);
    this.saveFields();
  },
  handleSubmit() {
    const isValid = this.fields.every(field => field.value.trim() !== '');
    if (!isValid) {
      alert('所有字段均为必填项');
      return;
    }
    console.log('表单数据:', this.fields);
    this.saveFields();
  },
  saveFields() {
    localStorage.setItem('fields', JSON.stringify(this.fields));
  },
}

结合 Vuex 管理状态

在大型应用中，推荐使用 Vuex 来管理状态。可以将表单状态存储在 Vuex 中，以便在整个应用中共享和管理。

最近，我的老板给我布置了一个任务：实现一个用户可以随时增删字段的动态表单。

你知道的，作为一个前端开发者，我平时和表单关系可不算好，这次的任务无疑是向我发起了挑战。于是，我带上了 Vue 3 这个利器，开始了我的动态表单征程。

接下来，我会带着大家一起从入门到精通，深入了解如何在 Vue 3 中实现动态表单。

图片

介绍
动态表单是一种允许用户根据需求动态调整表单字段的表单。利用 Vue 3 的响应式特性和组件系统，我们可以轻松实现这一需求。

本文将带你从基础概念开始，一步步实现一个支持动态添加、删除和验证的表单，并介绍一些高级技巧。

图片

基础概念
在实现动态表单之前，我们需要理解以下基础概念：

• Vue 3 响应式系统：Vue 3 使用 Proxy 实现响应式系统，使得数据变化可以自动更新视图。

• 组件：Vue 组件是构建 Vue 应用的基本单元，通过组件化可以提高代码的复用性和可维护性。

• 表单绑定：通过 v-model 指令可以轻松地实现表单输入与数据的双向绑定。

实现步骤
项目初始化
首先，我们需要初始化一个 Vue 3 项目。如果你还没有安装 Vue CLI，可以通过以下命令安装：

npm install -g @vue/cli
然后，创建一个新的 Vue 项目：

vue create dynamic-form
cd dynamic-form
选择默认配置或者根据自己的需求进行配置。创建完成后，进入项目目录并启动开发服务器：

npm run serve
创建基础表单组件
接下来，我们创建一个基础表单组件。首先，在 src/components 目录下创建一个 BaseForm.vue 文件，并添加以下内容：

<template>
  <div>
    <form @submit.prevent="handleSubmit">
      <div v-for="(field, index) in fields" :key="index" class="form-group">
        <label :for="`field-${index}`">{{ field.label }}</label>
        <input
          v-model="field.value"
          :type="field.type"
          :id="`field-${index}`"
          class="form-control"
        />
        <button type="button" @click="removeField(index)">删除</button>
      </div>
      <button type="button" @click="addField">添加字段</button>
      <button type="submit">提交</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fields: [
        { label: '姓名', type: 'text', value: '' },
        { label: '邮箱', type: 'email', value: '' },
      ],
    };
  },
  methods: {
    addField() {
      this.fields.push({ label: '新字段', type: 'text', value: '' });
    },
    removeField(index) {
      this.fields.splice(index, 1);
    },
    handleSubmit() {
      console.log('表单数据:', this.fields);
    },
  },
};
</script>

<style>
.form-group {
  margin-bottom: 1rem;
}
</style>
动态添加表单字段
在上述基础表单组件中，我们已经实现了添加字段的功能。通过点击“添加字段”按钮，我们可以在表单中动态添加新的字段。

<button type="button" @click="addField">添加字段</button>
对应的方法如下：

methods: {
  addField() {
    this.fields.push({ label: '新字段', type: 'text', value: '' });
  },
}
动态删除表单字段
同样地，我们还可以实现动态删除表单字段的功能。每个字段旁边都有一个“删除”按钮，点击后即可删除该字段。

<button type="button" @click="removeField(index)">删除</button>
对应的方法如下：

methods: {
  removeField(index) {
    this.fields.splice(index, 1);
  },
}
表单验证
为了提高表单的可靠性，我们需要在提交表单时进行验证。下面是一个简单的验证示例，确保每个字段都已填写。

methods: {
  handleSubmit() {
    const isValid = this.fields.every(field => field.value.trim() !== '');
    if (!isValid) {
      alert('所有字段均为必填项');
      return;
    }
    console.log('表单数据:', this.fields);
  },
}
高级技巧
在基础实现的基础上，我们还可以通过一些高级技巧来增强表单的功能。

使用动态组件
在某些情况下，我们可能需要根据字段类型动态渲染不同的表单控件。可以使用 Vue 的 component 组件来实现这一点。

<template>
  <div>
    <form @submit.prevent="handleSubmit">
      <div v-for="(field, index) in fields" :key="index" class="form-group">
        <label :for="`field-${index}`">{{ field.label }}</label>
        <component
          :is="getComponent(field.type)"
          v-model="field.value"
          :id="`field-${index}`"
          class="form-control"
        ></component>
        <button type="button" @click="removeField(index)">删除</button>
      </div>
      <button type="button" @click="addField">添加字段</button>
      <button type="submit">提交</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fields: [
        { label: '姓名', type: 'text', value: '' },
        { label: '邮箱', type: 'email', value: '' },
        { label: '描述', type: 'textarea', value: '' },
      ],
    };
  },
  methods: {
    addField() {
      this.fields.push({ label: '新字段', type: 'text', value: '' });
    },
    removeField(index) {
      this.fields.splice(index, 1);
    },
    handleSubmit() {
      const isValid = this.fields.every(field => field.value.trim() !== '');
      if (!isValid) {
        alert('所有字段均为必填项');
        return;
      }
      console.log('表单数据:', this.fields);
    },
    getComponent(type) {
      const components = {
        text: 'input',
        email: 'input',
        textarea: 'textarea',
      };
      return components[type] || 'input';
    },
  },
};
</script>

<style>
.form-group {
  margin-bottom: 1rem;
}
</style>
表单数据持久化
为了防止页面刷新导致表单数据丢失，我们可以将表单数据持久化到本地存储中。

created() {
  const savedFields = localStorage.getItem('fields');
  if (savedFields) {
    this.fields = JSON.parse(savedFields);
  }
},
methods: {
  addField() {
    this.fields.push({ label: '新字段', type: 'text', value: '' });
    this.saveFields();
  },
  removeField(index) {
    this.fields.splice(index, 1);
    this.saveFields();
  },
  handleSubmit() {
    const isValid = this.fields.every(field => field.value.trim() !== '');
    if (!isValid) {
      alert('所有字段均为必填项');
      return;
    }
    console.log('表单数据:', this.fields);
    this.saveFields();
  },
  saveFields() {
    localStorage.setItem('fields', JSON.stringify(this.fields));
  },
}
结合 Vuex 管理状态
在大型应用中，推荐使用 Vuex 来管理状态。可以将表单状态存储在 Vuex 中，以便在整个应用中共享和管理。

// store.js
import { createStore } from 'vuex';

export default createStore({
  state: {
    fields: [
      { label: '姓名', type: 'text', value: '' },
      { label: '邮箱', type: 'email', value: '' },
   

 ],
  },
  mutations: {
    addField(state, field) {
      state.fields.push(field);
    },
    removeField(state, index) {
      state.fields.splice(index, 1);
    },
    updateFieldValue(state, { index, value }) {
      state.fields[index].value = value;
    },
  },
});

// BaseForm.vue
<template>
  <div>
    <form @submit.prevent="handleSubmit">
      <div v-for="(field, index) in fields" :key="index" class="form-group">
        <label :for="`field-${index}`">{{ field.label }}</label>
        <input
          v-model="field.value"
          :type="field.type"
          :id="`field-${index}`"
          class="form-control"
        />
        <button type="button" @click="removeField(index)">删除</button>
      </div>
      <button type="button" @click="addField">添加字段</button>
      <button type="submit">提交</button>
    </form>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex';

export default {
  computed: {
    ...mapState(['fields']),
  },
  methods: {
    ...mapMutations(['addField', 'removeField', 'updateFieldValue']),
    handleSubmit() {
      const isValid = this.fields.every(field => field.value.trim() !== '');
      if (!isValid) {
        alert('所有字段均为必填项');
        return;
      }
      console.log('表单数据:', this.fields);
    },
  },
};
</script>

<style>
.form-group {
  margin-bottom: 1rem;
}
</style>
总结
通过本文的介绍，我们从基础到高级详细讲解了如何在 Vue 3 中实现动态表单。

我们学习了如何创建和管理动态表单字段，如何进行表单验证，以及如何使用动态组件、持久化数据和结合 Vuex 来增强表单的功能。

希望通过本文的介绍，您能掌握在 Vue 3 中实现动态表单的技巧，并在实际项目中应用这些知识。

总结

通过本文的介绍，我们从基础到高级详细讲解了如何在 Vue 3 中实现动态表单。

我们学习了如何创建和管理动态表单字段，如何进行表单验证，以及如何使用动态组件、持久化数据和结合 Vuex 来增强表单的功能。

希望通过本文的介绍，您能掌握在 Vue 3 中实现动态表单的技巧，并在实际项目中应用这些知识。

文章标签：
JavaScript
前端开发
开发者
存储
关键词：
表单前端
CodeQi技术小栈
目录
相关文章
余生H想飞的雪糕
|
5天前
|
存储 人工智能 前端开发
前端大模型应用笔记（三）：Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用，通过使用Transformer模型，实现了更智能的搜索功能，如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue，使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程，并展示了实际效果和待改进点。
余生H想飞的雪糕
38 2
白雾茫茫丶
|
17天前
|
前端开发 JavaScript 关系型数据库
前端的全栈之路：基于 Vue3 + Nest.js 全栈开发的后台应用
这篇文章介绍了一个名为Vue3Admin的全栈后台应用，前端基于SoybeanAdmin二次开发，后端基于Nest.js。主要使用了Vue3.5、AntDesignVue、UnoCSS、Pinia等前端技术栈，以及Nest.js、PostgreSQL、Prisma等后端技术栈。文章详细描述了系统的功能设计，包括动态国际化语言配置、登录用户操作日志、用户和角色权限映射、动态路由菜单、消息公告发布及前端业务功能等。同时，也提供了项目运行所需的环境和依赖，以及如何拉取代码、安装依赖和启动项目的方法。最后，文章展示了项目的演示图，并对项目进行了总结，指出项目未经严格测试，仅供学习交流使用。
白雾茫茫丶
28 1
前端的全栈之路：基于 Vue3 + Nest.js 全栈开发的后台应用
代码bug生产队
|
16天前
|
JavaScript 前端开发 数据安全/隐私保护
前端技术分享：使用Vue.js构建响应式表单
【10月更文挑战第1天】前端技术分享：使用Vue.js构建响应式表单
代码bug生产队
47 4
小徐在进步
|
1月前
|
前端开发 数据安全/隐私保护
【前端web入门第二天】03 表单-下拉菜单 文本域 label标签 按钮 【附注册信息综合案例】
本文档详细介绍了HTML表单的多种元素及其用法，包括下拉菜单（`&lt;select&gt;` 和 `&lt;option&gt;`）、文本域（`&lt;textarea&gt;`）、标签解释（`&lt;label&gt;`）、各类按钮（`&lt;button&gt;`）及表单重置功能、无语义布局标签（`&lt;div&gt;` 和 `&lt;span&gt;`）以及字符实体的应用。此外，还提供了一个完整的注册信息表单案例，涵盖个人信息、教育经历和工作经历等部分，展示了如何综合运用上述元素构建实用的表单。
小徐在进步
36 6
【前端web入门第二天】03 表单-下拉菜单 文本域 label标签 按钮 【附注册信息综合案例】
六卿
|
1月前
|
缓存 前端开发 数据可视化
前端基础(七)_表单的基本组成与使用
本文详细介绍了HTML表单的基本组成和使用，包括`<form>`标签、`<input>`表单域、`<select>`下拉列表、`<textarea>`多行文本域等元素。文章解释了表单的提交方式（GET和POST）、表单域的各种类型（文本、密码、单选按钮、复选框等）、提交按钮和重置按钮的作用，以及如何通过`<label>`标签提高表单的可访问性。此外，还讨论了表单元素的属性，如`readonly`、`disabled`、`maxlength`等。
六卿
18 1
小徐在进步
|
1月前
|
前端开发 数据安全/隐私保护
【前端web入门第二天】02 表单-input标签-单选框-多选框
本文介绍了HTML中`&lt;input&gt;`标签的基本使用方法及其应用场景，如登录、注册页面和搜索区域。通过设置`type`属性，可以实现文本框、密码框、单选框、多选框及文件上传等功能。此外，还详细说明了占位文本的使用、单选框的常用属性及多选框的默认选中状态，并提供了示例代码与效果展示。
小徐在进步
43 7
Yaiba123
|
2月前
|
前端开发 JavaScript
在 Vue3 + ElementPlus 项目中使用 computed 实现前端静态分页
本文介绍了在Vue3 + ElementPlus项目中使用`computed`属性实现前端静态分页的方法，并提供了详细的示例代码和运行效果。
Yaiba123
138 1
在 Vue3 + ElementPlus 项目中使用 computed 实现前端静态分页
热爱技术的小郑
|
2月前
|
前端开发 JavaScript
这篇文章介绍了如何使用form表单结合Bootstrap格式将前端数据通过action属性提交到后端的servlet，包括前端表单的创建、数据的一级和二级验证，以及后端servlet的注解和参数获取。
这篇文章介绍了使用AJAX技术将前端页面中表单接收的多个参数快速便捷地传输到后端servlet的方法，并通过示例代码展示了前端JavaScript中的AJAX调用和后端servlet的接收处理。
热爱技术的小郑
26 2
这篇文章介绍了如何使用form表单结合Bootstrap格式将前端数据通过action属性提交到后端的servlet，包括前端表单的创建、数据的一级和二级验证，以及后端servlet的注解和参数获取。
热爱技术的小郑
|
2月前
|
前端开发
第一种方式：使用form表单将前端数据提交到servelt（将前端数据提交到servlet）
这篇文章介绍了如何使用form表单结合Bootstrap格式将前端数据通过action属性提交到后端的servlet，包括前端表单的创建、数据的一级和二级验证，以及后端servlet的注解和参数获取。
热爱技术的小郑
41 2
第一种方式：使用form表单将前端数据提交到servelt（将前端数据提交到servlet）
CodeQi技术小栈
|
2月前
|
JavaScript 前端开发 API
每个前端开发人员都必须知道的 7 个 Vue3 组件库！
每个前端开发人员都必须知道的 7 个 Vue3 组件库！
CodeQi技术小栈
533 8

热门文章

最新文章

  • 1
    大型网站重构指南 第1.3部分：前端监控和小程序监控 Sentry
  • 2
    从《淘特斗地主》说起，前端如何做 h5 游戏的游戏体验
  • 3
    puppet使用 apache passsenger 作为前端 (centos)
  • 4
    lemon oa前端页面——由user-base-list谈项目组织
  • 5
    使用篇-基于Laravel开发博客应用系列 —— 使用Bower+Gulp集成前端资源
  • 6
    VUE element-ui之table表格前端自动过滤（筛选），不调用数据接口筛选表格，方法
  • 7
    前端常见Vue2.0面试题
  • 8
    前端 时间个性化 插件 jquery.timeago.js
  • 9
    好看的前端计算器代码分享（html+css+js制作计算器）
  • 10
    前端学习笔记202307学习笔记第五十七天-模拟面试笔记http-DNs解析ip地址
  • 1
    PHP医院安全不良事件管理系统源码（AEMS）前端vue2+element+后端laravel8不良事件上报与闭环管理
    72
  • 2
    前端基础知识
    49
  • 3
    BoostCompass( http_server 模块 | 项目前端代码 )
    59
  • 4
    java测试链接超时返回前端
    51
  • 5
    深入理解前端开发：从基础到实践
    74
  • 6
    快照测试在前端自动化测试中的应用
    47
  • 7
    前端自动化测试中的快照测试原理
    85
  • 8
    前端自动化测试
    161
  • 9
    新一代前端框架：革命性的Web开发利器
    62
  • 10
    如何优化前端网页加载速度
    75

    • 相关课程

    更多
  • 网站性能前端监控课程
  • 移动Web前端开发
  • Ajax 前端开发入门与实战
  • 零基础学前端HTML+CSS
  • 前端开发CSS基础
  • 前端开发框架Bootstrap使用教程

    • 相关电子书

    更多
  • Vue.js 在前端服务化上的探索与实践
  • 阿里文娱大前端技术实践
  • 前端代码是怎样智能生成的

    • 相关实验场景

    更多
  • 前端开发基础3：CSS3常见显示属性
  • 语言入门-1：环境构建
  • 前端开发基础6：Node.js和LESS预编译工具
  • 前端开发基础2：VS Code和Edge的联动开发
  • 前端开发基础1：前端开发环境的安装和配置
  • 基于函数计算快速搭建Zblog等传统应用框架
    • 下一篇
    AI助理直击要害，从繁复中提炼精华——使用CDN加速访问OSS存储的图片