本文介绍如何利用vue.js和json数据动态创建包含输入框和复选框的表单。 许多应用场景都需要根据后端返回的数据动态生成前端表单，这篇文章将提供一种高效的解决方案。

假设我们拥有如下JSON数据结构：

[
  { "type": "input", "label": "姓名", "value": "" },
  { "type": "checkbox", "label": "爱好", "value": [], "options": [{"key": "reading", "value": "阅读"}, {"key": "coding", "value": "编程"}] }
]

每个JSON对象代表表单的一个元素，包含type（元素类型）、label（标签文本）、value（元素值）以及options（复选框选项）等属性。

使用Vue.js的v-for指令，我们可以遍历JSON数据并动态渲染表单元素：

Springboot Vue Builder

从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。

下载

<template>
  <div>
    <div v-for="(item, index) in formData" :key="index">
      <label>{{ item.label }}</label>
      <el-input v-if="item.type === 'input'" v-model="item.value"></el-input>
      <el-checkbox-group v-else-if="item.type === 'checkbox'" v-model="item.value">
        <el-checkbox v-for="option in item.options" :key="option.key" :label="option.value">
          {{ option.value }}
        </el-checkbox>
      </el-checkbox-group>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formData: [
        { "type": "input", "label": "姓名", "value": "" },
        { "type": "checkbox", "label": "爱好", "value": [], "options": [{"key": "reading", "value": "阅读"}, {"key": "coding", "value": "编程"}] }
      ]
    };
  }
};
</script>

这段代码使用了Element UI组件库，你可以根据需要替换成其他UI库或原生HTML元素。 v-if指令根据type属性选择性地渲染输入框或复选框组，v-model指令实现双向数据绑定。 请注意，复选框的value属性应该是一个数组，用于存储用户选择的选项。 通过这种方法，可以轻松根据不同的JSON数据动态生成各种类型的表单。

立即学习“前端免费学习笔记（深入）”；