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

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

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

热门文章

最新文章

  • 1
    前端，测试如何修改后端接口返回的响应数据
  • 2
    前端 时间个性化 插件 jquery.timeago.js
  • 3
    前端分页插件pagination
  • 4
    一看就懂的gulp操作指南：让前端工作变得更加轻松（一）
  • 5
    【HTML+CSS+JS】前端三剑客实现3D旋转照片墙
  • 6
    wordpress页面前端添加编辑按钮
  • 7
    购物车Demo,前端使用AngularJS,后端使用ASP.NET Web API(2)--前端，以及前后端Session
  • 8
    从0到上线开发企业级电商项目_前端_01_sublime使用技巧
  • 9
    [前端]jekyll+markdown+github搭建个人博客
  • 10
    你用过的网站前端优化的技术有哪些？
  • 1
    前端后端测试接口mork神器，Apifox使用一分钟入门
    209
  • 2
    编译第三方前端项目时候出现Syntax Error: TypeError: Cannot set properties of undefined (setting ‘parent‘)
    467
  • 3
    【Web前端】CSS基本语法规范和引入方式&&常见选择器用法&&常见元素属性
    54
  • 4
    基于jeecg前端实现从表ERP格式选择
    34
  • 5
    前端进度条组件NProgress
    81
  • 6
    前端效果 登入界面
    49
  • 7
    vue前端展示【1】
    31
  • 8
    nvm,npm,yarn相关指令，前端配置准备
    54
  • 9
    深入浅出JVM（六）之前端编译过程与语法糖原理
    49
  • 10
    HTML5基础题及答案——必刷前端题目(背)
    58

    • 相关课程

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

    • 相关电子书

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

    • 相关实验场景

    更多
  • 每个IT人都想学的“Web应用上云经典架构”实战
  • 前端开发基础3：CSS3常见显示属性
  • 前端开发基础6：Node.js和LESS预编译工具
  • 前端开发基础2：VS Code和Edge的联动开发
  • 前端开发基础1：前端开发环境的安装和配置
  • 基于函数计算快速搭建Zblog等传统应用框架
    • 下一篇
    阿里云OSS设置跨域访问