哇哦~ 老板让我用 vue3 setup 实现动态表单的功能？这有什么难度吗？立马安排！-阿里云开发者社区

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

2024-08-09 58

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

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

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

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

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

第一步：创建 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 实现了一个动态表单。这

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

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

第一步：创建 Vue 3 项目

第二步：安装必要的依赖

第三步：配置 Vue Router

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

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

Home.vue

Form.vue

第六步：运行项目

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

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

第九步：优化代码结构

结语

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

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

第一步：创建 Vue 3 项目

第二步：安装必要的依赖

第三步：配置 Vue Router

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

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

Home.vue

Form.vue

第六步：运行项目

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

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

第九步：优化代码结构

结语

热门文章

最新文章

相关课程

相关电子书

相关实验场景