Vue生成动态表单单选多选输入框

Vue.js 是一款流行的前端框架，用于构建用户界面。在Vue中，动态生成表单元素，如单选或多选输入框，通常通过模板语法（template）结合数据绑定（data binding）来实现。你可以这样做：

<template>
  <div id="dynamic-form">
    <!-- 使用v-for遍历数组 -->
    <div v-for="(item, index) in items" :key="index">
      <!-- 单选框示例 -->
      <input type="radio" :name="itemName" :value="item.value" v-model="selectedValue">
      <label>{{ item.label }}</label>

      <!-- 多选框示例 -->
      <input type="checkbox" :name="itemName" :value="item.value" v-model="selectedItems">
      <label>{{ item.label }}</label>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { value: 'option1', label: 'Option 1' },
        { value: 'option2', label: 'Option 2' },
        // 更多选项...
      ],
      selectedValue: '', // 单选框默认值
      selectedItems: [], // 多选框默认值是一个空数组
      itemName: 'my-radio-checkbox-group', // 共享相同的name属性
    };
  },
};
</script>

在这个例子中，`items`数组存储了所有的选项，`v-model`指令连接了视图模型，当你选择单选按钮或复选框时，对应的`selectedValue`或`selectedItems`数组会自动更新。