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

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

2024-08-09 141
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 听说在 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技术小栈
目录
相关文章
想飞的雪糕
|
2月前
|
存储 人工智能 前端开发
前端大模型应用笔记（三）：Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用，通过使用Transformer模型，实现了更智能的搜索功能，如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue，使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程，并展示了实际效果和待改进点。
想飞的雪糕
199 2
小王老师呀
|
1月前
|
资源调度 前端开发 JavaScript
vite3+vue3 实现前端部署加密混淆 javascript-obfuscator
【11月更文挑战第10天】本文介绍了在 Vite 3 + Vue 3 项目中使用 `javascript-obfuscator` 实现前端代码加密混淆的详细步骤，包括安装依赖、创建混淆脚本、修改 `package.json` 脚本命令、构建项目并执行混淆，以及在 HTML 文件中引用混淆后的文件。通过这些步骤，可以有效提高代码的安全性。
小王老师呀
94 2
想飞的雪糕
|
2月前
|
监控 JavaScript 前端开发
前端的混合之路Meteor篇（六）：发布订阅示例代码及如何将Meteor的响应数据映射到vue3的reactive系统
本文介绍了 Meteor 3.0 中的发布-订阅模型，详细讲解了如何在服务器端通过 `Meteor.publish` 发布数据，包括简单发布和自定义发布。客户端则通过 `Meteor.subscribe` 订阅数据，并使用 MiniMongo 实现实时数据同步。此外，还展示了如何在 Vue 3 中将 MiniMongo 的 `cursor` 转化为响应式数组，实现数据的自动更新。
想飞的雪糕
52 2
小王老师呀
|
1月前
|
前端开发 JavaScript 安全
vite3+vue3 实现前端部署加密混淆 javascript-obfuscator
【11月更文挑战第7天】本文介绍了在 Vite 3 + Vue 3 项目中使用 `javascript-obfuscator` 实现前端代码加密混淆的详细步骤。包括项目准备、安装 `javascript-obfuscator`、配置 Vite 构建以应用混淆，以及最终构建项目进行混淆。通过这些步骤，可以有效提升前端代码的安全性，防止被他人轻易分析和盗用。
小王老师呀
304 0
代码bug生产队
|
2月前
|
JavaScript 前端开发 数据安全/隐私保护
前端技术分享：使用Vue.js构建响应式表单
【10月更文挑战第1天】前端技术分享：使用Vue.js构建响应式表单
代码bug生产队
82 4
小徐在进步
|
3月前
|
前端开发 数据安全/隐私保护
【前端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;`）以及字符实体的应用。此外，还提供了一个完整的注册信息表单案例，涵盖个人信息、教育经历和工作经历等部分，展示了如何综合运用上述元素构建实用的表单。
小徐在进步
61 6
【前端web入门第二天】03 表单-下拉菜单 文本域 label标签 按钮 【附注册信息综合案例】
六卿
|
3月前
|
缓存 前端开发 数据可视化
前端基础(七)_表单的基本组成与使用
本文详细介绍了HTML表单的基本组成和使用，包括`<form>`标签、`<input>`表单域、`<select>`下拉列表、`<textarea>`多行文本域等元素。文章解释了表单的提交方式（GET和POST）、表单域的各种类型（文本、密码、单选按钮、复选框等）、提交按钮和重置按钮的作用，以及如何通过`<label>`标签提高表单的可访问性。此外，还讨论了表单元素的属性，如`readonly`、`disabled`、`maxlength`等。
六卿
44 1
小徐在进步
|
3月前
|
前端开发 数据安全/隐私保护
【前端web入门第二天】02 表单-input标签-单选框-多选框
本文介绍了HTML中`&lt;input&gt;`标签的基本使用方法及其应用场景，如登录、注册页面和搜索区域。通过设置`type`属性，可以实现文本框、密码框、单选框、多选框及文件上传等功能。此外，还详细说明了占位文本的使用、单选框的常用属性及多选框的默认选中状态，并提供了示例代码与效果展示。
小徐在进步
97 7
热爱技术的小郑
|
4月前
|
前端开发 JavaScript
这篇文章介绍了如何使用form表单结合Bootstrap格式将前端数据通过action属性提交到后端的servlet，包括前端表单的创建、数据的一级和二级验证，以及后端servlet的注解和参数获取。
这篇文章介绍了使用AJAX技术将前端页面中表单接收的多个参数快速便捷地传输到后端servlet的方法，并通过示例代码展示了前端JavaScript中的AJAX调用和后端servlet的接收处理。
热爱技术的小郑
42 2
这篇文章介绍了如何使用form表单结合Bootstrap格式将前端数据通过action属性提交到后端的servlet，包括前端表单的创建、数据的一级和二级验证，以及后端servlet的注解和参数获取。
热爱技术的小郑
|
4月前
|
前端开发
第一种方式：使用form表单将前端数据提交到servelt（将前端数据提交到servlet）
这篇文章介绍了如何使用form表单结合Bootstrap格式将前端数据通过action属性提交到后端的servlet，包括前端表单的创建、数据的一级和二级验证，以及后端servlet的注解和参数获取。
热爱技术的小郑
91 2
第一种方式：使用form表单将前端数据提交到servelt（将前端数据提交到servlet）

热门文章

最新文章

  • 1
    从0开始打造一款APP：前端+搭建本机服务，定制暖冬卫衣先到先得
  • 2
    WeaveFox：蚂蚁集团推出 AI 前端智能研发平台，能够根据设计图直接生成源代码，支持多种客户端和技术栈
  • 3
    前端页面加载性能指标之LCP
  • 4
    前端必须掌握的设计模式——单例模式
  • 5
    （前端3D模型开发）网页三维CAD中加载和保存STEP模型
  • 6
    探索无界：前端开发中的响应式设计深度实践与思考###
  • 7
    探索前端性能优化：关键策略与代码实例
  • 8
    前端自动化测试
  • 9
    探索无界：前端开发中的响应式设计哲学####
  • 10
    前端状态管理：Vuex 核心概念与实战
  • 1
    web前端之纯CSS实现简单酷炫的照片墙效果、排除元素的伪类、scale
    95
  • 2
    《跨界合作：前端与后端如何优化协作效率》
    84
  • 3
    使用Vue.js构建交互式前端的技术探索
    92
  • 4
    如何优化前端性能：关键步骤和技巧
    89
  • 5
    nbcio-boot基于jeecg的flowable支持部门经理的单个或多实例支持（前端部分）
    103
  • 6
    ruoyi-nbcio-plus基于vue3的flowable修正加签与跳转的前端问题
    126
  • 7
    vue的 blob文件下载文件时，后端自定义异常，并返回json错误提示信息，前端捕获信息并展示给用户
    277
  • 8
    ruoyi-nbcio-plus的Vue3前端一些插件使用介绍（二）
    74
  • 9
    ruoyi-nbcio-plus的Vue3前端一些插件使用介绍（一）
    100
  • 10
    ruoyi-nbcio-plus的Vue3前端升级组件后出现的问题（二）
    148

    • 相关课程

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

    • 相关电子书

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

    • 相关实验场景

    更多
  • 前端开发基础3：CSS3常见显示属性
  • 前端开发基础6：Node.js和LESS预编译工具
  • 前端开发基础2：VS Code和Edge的联动开发
  • 前端开发基础1：前端开发环境的安装和配置
  • 基于函数计算快速搭建Zblog等传统应用框架
    • 下一篇
    手把手教你白嫖阿里云服务器(免费领服务器)