vue3写一个带折叠和展开的表单

在Vue3中，你可以使用`v-model`、条件渲染（`v-if` 或者 `v-show`）、以及自定义指令等技术来创建一个支持折叠和展开功能的动态表单。下面是一个简单的例子，假设我们有一个字段数组`formFields`：

<template>
  <div>
    <ul ref="fieldList">
      <li v-for="(item, index) in formFields" :key="index">
        <input type="text" v-model="item.value" :disabled="isExpanded(index)">
        <button @click="toggleExpand(index)">{{ isExpanded(index) ? '收起' : '展开' }}</button>
        <template v-if="expanded[index]">
          <!-- 展开的内容 -->
          <p>详细信息...</p>
        </template>
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref } from 'vue';

// 初始化字段数组
const formFields = ref([{ value: '' }, { value: '' }]);
// 存储每个字段是否展开的状态
const expanded = ref(Array(formFields.value.length).fill(false));

function toggleExpand(index) {
  expanded.value[index] = !expanded.value[index];
}
function isExpanded(index) {
  return expanded.value[index];
}
</script>

在这个例子中，当点击按钮时，会通过`toggleExpand`函数切换对应的`expanded`状态，进而控制`v-if`的条件，隐藏或显示详细的字段内容。