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

哇哦~ 老板让我用 vue3 setup 实现动态表单的功能？这有什么难度吗？立马安排！

2024-08-09 48
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 哇哦~ 老板让我用 vue3 setup 实现动态表单的功能？这有什么难度吗？立马安排！

当老板走过来对我说：“你能不能用 Vue 3 setup 实现一个动态表单的功能？”时，我的心情可以用两个字来形容：兴奋！

没错，不是紧张，不是焦虑，而是兴奋！因为用 Vue 3 setup 实现动态表单对于我来说，就像吃饭喝水一样简单。

接下来，我会详细讲解我是如何一步步完成这个任务的。

e156e520d1e878a89fb9c3a122ab783f.jpg

第一步：创建 Vue 3 项目

首先，我们需要创建一个 Vue 3 项目。如果你还没有安装 Vue CLI，可以使用以下命令来安装：

npm install -g @vue/cli

安装完毕后，可以使用以下命令创建一个新的 Vue 项目：

vue create dynamic-form

在创建过程中，选择 Vue 3 模板。完成后，进入项目目录：

cd dynamic-form

第二步：安装必要的依赖

为了实现动态表单，我们需要安装一些依赖。主要是 Vue Router 和 Vuex，用于路由管理和状态管理。使用以下命令安装：

npm install vue-router@next vuex@next

第三步：配置 Vue Router

接下来，我们需要配置 Vue Router。在 src 目录下创建一个新的 router 目录，并在其中创建 index.js 文件：

// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import Form from '../views/Form.vue';
const routes = [
  { path: '/', component: Home },
  { path: '/form', component: Form }
];
const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
});
export default router;

然后在 main.js 中引入这个路由：

// src/main.js
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
createApp(App).use(router).mount('#app');

第四步：创建动态表单组件

接下来，我们创建一个动态表单组件。我们会使用 <script setup> 来实现这个组件。在 src/components 目录下创建一个新的 DynamicForm.vue 文件：

<!-- src/components/DynamicForm.vue -->
<template>
  <form @submit.prevent="handleSubmit">
    <div v-for="(field, index) in fields" :key="index">
      <label :for="field.name">{{ field.label }}</label>
      <input :type="field.type" :name="field.name" v-model="formData[field.name]" />
    </div>
    <button type="submit">提交</button>
  </form>
</template>
<script setup>
import { ref } from 'vue';
const fields = ref([
  { name: 'username', label: '用户名', type: 'text' },
  { name: 'email', label: '邮箱', type: 'email' },
  { name: 'password', label: '密码', type: 'password' }
]);
const formData = ref({});
fields.value.forEach(field => {
  formData.value[field.name] = '';
});
const handleSubmit = () => {
  console.log(formData.value);
};
</script>
<style scoped>
form {
  display: flex;
  flex-direction: column;
}
label {
  margin: 8px 0 4px;
}
input {
  margin-bottom: 16px;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
button {
  padding: 10px 20px;
  background-color: #42b983;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
button:hover {
  background-color: #369970;
}
</style>

第五步：将组件集成到页面

现在我们已经创建了动态表单组件，接下来将其集成到我们的页面中。在 src/views 目录下创建 Home.vue 和 Form.vue 文件。

Home.vue

<!-- src/views/Home.vue -->
<template>
  <div>
    <h1>欢迎来到动态表单示例</h1>
    <router-link to="/form">跳转到表单页面</router-link>
  </div>
</template>
<script setup>
</script>

Form.vue

<!-- src/views/Form.vue -->
<template>
  <div>
    <h1>动态表单</h1>
    <DynamicForm />
  </div>
</template>
<script setup>
import DynamicForm from '../components/DynamicForm.vue';
</script>

第六步：运行项目

完成以上步骤后，我们可以运行项目来查看效果：

npm run serve

打开浏览器，访问 http://localhost:8080，你会看到一个欢迎页面，点击跳转链接可以进入动态表单页面。

第七步：添加动态字段功能

为了使表单更具动态性，我们需要实现动态添加字段的功能。更新 DynamicForm.vue 文件如下：

<!-- src/components/DynamicForm.vue -->
<template>
  <form @submit.prevent="handleSubmit">
    <div v-for="(field, index) in fields" :key="index">
      <label :for="field.name">{{ field.label }}</label>
      <input :type="field.type" :name="field.name" v-model="formData[field.name]" />
    </div>
    <button type="button" @click="addField">添加字段</button>
    <button type="submit">提交</button>
  </form>
</template>
<script setup>
import { ref } from 'vue';
const fields = ref([
  { name: 'username', label: '用户名', type: 'text' },
  { name: 'email', label: '邮箱', type: 'email' },
  { name: 'password', label: '密码', type: 'password' }
]);
const formData = ref({});
fields.value.forEach(field => {
  formData.value[field.name] = '';
});
const handleSubmit = () => {
  console.log(formData.value);
};
const addField = () => {
  const newField = {
    name: `field${fields.value.length + 1}`,
    label: `字段${fields.value.length + 1}`,
    type: 'text'
  };
  fields.value.push(newField);
  formData.value[newField.name] = '';
};
</script>
<style scoped>
form {
  display: flex;
  flex-direction: column;
}
label {
  margin: 8px 0 4px;
}
input {
  margin-bottom: 16px;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
button {
  padding: 10px 20px;
  background-color: #42b983;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
button:hover {
  background-color: #369970;
}
</style>

第八步：添加字段类型选择功能

为了让我们的动态表单更强大，我们可以添加字段类型选择功能。再次更新 DynamicForm.vue 文件如下：

<!-- src/components/DynamicForm.vue -->
<template>
  <form @submit.prevent="handleSubmit">
    <div v-for="(field, index) in fields" :key="index">
      <label :for="field.name">{{ field.label }}</label>
      <input :type="field.type" :name="field.name" v-model="formData[field.name]" />
    </div>
    <div>
      <input v-model="newField.label" placeholder="字段标签" />
      <select v-model="newField.type">
        <option value="text">文本</option>
        <option value="email">邮箱</option>
        <option value="password">密码</option>
        <option value="number">数字</option>
      </select>
      <button type="button" @click="addField">添加字段</button>
    </div>
    <button type="submit">提交</button>
  </form>
</template>
<script setup>
import { ref } from 'vue';
const fields = ref([
  { name: 'username', label: '用户名', type: 'text' },
  { name: 'email', label: '邮箱', type: 'email' },
  { name: 'password', label: '密码', type: 'password' }
]);
const formData = ref({});
initializeFormData();
const handleSubmit = () => {
  console.log(formData.value);
};
const newField = ref({ label: '', type: 'text' });
const addField = () => {
  const fieldName = generateFieldName();
  const newFieldData = {
    name: fieldName,
    label: newField.value.label || `字段${fields.value.length + 1}`,
    type: newField.value.type
  };
  fields.value.push(newFieldData);
  formData.value[fieldName] = '';
  newField.value.label = '';
};
function initializeFormData() {
  fields.value.forEach(field => {
    formData.value[field.name] = '';
  });
}
function generateFieldName() {
  return `field${fields.value.length + 1}`;
}
</script>
<style scoped>
form {
  display: flex;
  flex-direction: column;
}
label {
  margin: 8px 0 4px;
}
input {
  margin-bottom: 16px;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
select {
  margin-bottom: 16px;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
button {
  padding: 10px 20px;
  background-color: #42b983;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
button:hover {
  background-color: #369970;
}
</style>

第九步：优化代码结构

为了提高代码的可读性和维护性，我们可以将一些逻辑抽离出来，形成独立的函数。下面是优化后的 DynamicForm.vue：

<!-- src/components/DynamicForm.vue -->
<template>
  <form @submit.prevent="handleSubmit">
    <div v-for="(field, index) in fields" :key="index">
      <label :for="field.name">{{ field.label }}</label>
      <input :type="field.type" :name="field.name" v-model="formData[field.name]" />
    </div>
    <div>
      <input v-model="newField.label" placeholder="字段标签" />
      <select v-model="newField.type">
        <option value="text">文本</option>
        <option value="email">邮箱</option>
        <option value="password">密码</option>
        <option value="number">数字</option>
      </select>
      <button type="button" @click="addField">添加字段</button>
    </div>
    <button type="submit">提交</button>
  </form>
</template>
<script setup>
import { ref } from 'vue';
const fields = ref([
  { name: 'username', label: '用户名', type: 'text' },
  { name: 'email', label: '邮箱', type: 'email' },
  { name: 'password', label: '密码', type: 'password' }
]);
const formData = ref({});
initializeFormData();
const handleSubmit = () => {
  console.log(formData.value);
};
const newField = ref({ label: '', type: 'text' });
const addField = () => {
  const fieldName = generateFieldName();
  const newFieldData = {
    name: fieldName,
    label: newField.value.label || `字段${fields.value.length + 1}`,
    type: newField.value.type
  };
  fields.value.push(newFieldData);
  formData.value[fieldName] = '';
  newField.value.label = '';
};
function initializeFormData() {
  fields.value.forEach(field => {
    formData.value[field.name] = '';
  });
}
function generateFieldName() {
  return `field${fields.value.length + 1}`;
}
</script>
<style scoped>
form {
  display: flex;
  flex-direction: column;
}
label {
  margin: 8px 0 4px;
}
input {
  margin-bottom: 16px;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
select {
  margin-bottom: 16px;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
button {
  padding: 10px 20px;
  background-color: #42b983;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
button:hover {
  background-color: #369970;
}
</style>

结语

通过以上步骤，我们成功地使用 Vue 3 setup 实现了一个动态表单。这

个过程看似复杂，但只要一步一步来，每一步都不是很难。

文章标签：
JavaScript
关键词：
vue3 setup VUE.js
setup VUE.js
表单VUE.js
vue3功能VUE.js
vue3表单功能VUE.js
CodeQi技术小栈
目录
相关文章
CamilleKing
|
17天前
|
JavaScript 前端开发 开发者
Vue 3中的Proxy
【10月更文挑战第23天】Vue 3中的`Proxy`为响应式系统带来了更强大、更灵活的功能，解决了Vue 2中响应式系统的一些局限性，同时在性能方面也有一定的提升，为开发者提供了更好的开发体验和性能保障。
CamilleKing
40 7
小宋1021
|
19天前
|
前端开发 数据库
芋道框架审批流如何实现(Cloud+Vue3)
芋道框架审批流如何实现(Cloud+Vue3)
小宋1021
39 3
CamilleKing
|
17天前
|
JavaScript 数据管理 Java
在 Vue 3 中使用 Proxy 实现数据双向绑定的性能如何？
【10月更文挑战第23天】Vue 3中使用Proxy实现数据双向绑定在多个方面都带来了性能的提升，从更高效的响应式追踪、更好的初始化性能、对数组操作的优化到更优的内存管理等，使得Vue 3在处理复杂的应用场景和大量数据时能够更加高效和稳定地运行。
CamilleKing
36 1
CamilleKing
|
17天前
|
JavaScript 开发者
在 Vue 3 中使用 Proxy 实现数据的双向绑定
【10月更文挑战第23天】Vue 3利用 `Proxy` 实现了数据的双向绑定，无论是使用内置的指令如 `v-model`，还是通过自定义事件或自定义指令，都能够方便地实现数据与视图之间的双向交互，满足不同场景下的开发需求。
CamilleKing
39 1
游客zi3qmblbcdexu
|
20天前
|
前端开发 JavaScript
简记 Vue3（一）—— setup、ref、reactive、toRefs、toRef
简记 Vue3（一）—— setup、ref、reactive、toRefs、toRef
游客zi3qmblbcdexu
35 1
我是快乐的嘟嘟
|
8天前
|
JavaScript 前端开发
如何在 Vue 项目中配置 Tree Shaking？
通过以上针对 Webpack 或 Rollup 的配置方法，就可以在 Vue 项目中有效地启用 Tree Shaking，从而优化项目的打包体积，提高项目的性能和加载速度。在实际配置过程中，需要根据项目的具体情况和需求，对配置进行适当的调整和优化。
我是快乐的嘟嘟
75 26
html的七十二变
|
8天前
|
存储 缓存 JavaScript
在 Vue 中使用 computed 和 watch 时，性能问题探讨
本文探讨了在 Vue.js 中使用 computed 计算属性和 watch 监听器时可能遇到的性能问题，并提供了优化建议，帮助开发者提高应用性能。
html的七十二变
27 8
html的七十二变
|
8天前
|
存储 缓存 JavaScript
如何在大型 Vue 应用中有效地管理计算属性和侦听器
在大型 Vue 应用中，合理管理计算属性和侦听器是优化性能和维护性的关键。本文介绍了如何通过模块化、状态管理和避免冗余计算等方法，有效提升应用的响应性和可维护性。
html的七十二变
22 7
html的七十二变
|
8天前
|
存储 缓存 JavaScript
Vue 中 computed 和 watch 的差异
Vue 中的 `computed` 和 `watch` 都用于处理数据变化，但使用场景不同。`computed` 用于计算属性，依赖于其他数据自动更新；`watch` 用于监听数据变化，执行异步或复杂操作。
html的七十二变
25 5
游客ady5kpv352g3u
|
7天前
|
JavaScript 前端开发 UED
vue学习第二章
欢迎来到我的博客！我是一名自学了2年半前端的大一学生，熟悉JavaScript与Vue，目前正在向全栈方向发展。如果你从我的博客中有所收获，欢迎关注我，我将持续更新更多优质文章。你的支持是我最大的动力！🎉🎉🎉
游客ady5kpv352g3u
17 3

热门文章

最新文章

  • 1
    vite 如何做到让 vue 本地开发更快速？
  • 2
    VS Code书写vue项目配置 eslint+prettier 统一代码风格
  • 3
    vue3的动态组件 component （点击顶部切换下面展示对应的组件内容）
  • 4
    如何在 Vue 中使用 Chart.js - 手把手教你搭可视化数据图表
  • 5
    自制简单的range（Vue）
  • 6
    vue 里怎么使用 echarts 实现地图自动轮播功能、自定义 tooltip 悬浮位置提示、自定义 label 标签位置样式？
  • 7
    vite原理之解析.vue文件
  • 8
    Vue3中的jsx的简单体验，在vue3中使用jsx语法
  • 9
    vue里怎么使用pdf.js实现pdf文件的预览功能
  • 10
    Vue报错Interpolation inside attributes has been removed.解决方法
  • 1
    vue(1)，小白看完都会了
    43
  • 2
    深入理解Vue.js中的nextTick：实现异步更新的奥秘
    147
  • 3
    Vue中避免滥用this去读取data中数据
    43
  • 4
    vue3服务端渲染警告解决----DefinePlugin
    120
  • 5
    vue中使用pinia及持久化
    60
  • 6
    Vue3与Vue2：对比分析与迁移指南
    394
  • 7
    双向数据绑定：Vue.js的魔法背后
    56
  • 8
    Vue class和style绑定：动态美化你的组件
    82
  • 9
    Vue 监听器：让你的应用实时响应变化
    199
  • 10
    vue3封装面包屑
    146

    • 相关课程

    更多
  • Spring Boot+Vue.js+FastDFS实现分布式图片服务器
  • Vue.js 入门与实战
  • Vue.js完全自学手册图文教程

    • 相关电子书

    更多
  • Vue.js 在前端服务化上的探索与实践
  • Vue.js在前端服务化上的实践与探索
  • 用RxSwift写易维护易读的愉悦代码
    • 下一篇
    阿里云OSS设置跨域访问