vue 表单点击+展开收起 样式

Vue 表单点击展开收起样式可以通过使用自定义的 CSS 类来实现。

首先，在 Vue 组件中，可以使用 `data` 属性来定义一个变量，用于控制展开与收起的状态。例如：

data() {
  return {
    isExpanded: false
  }
}

然后，在表单的组件模板中，可以使用条件渲染 `v-if` 来判断展开与收起的状态，并动态添加或移除 CSS 类。例如：

<template>
  <div>
    <div v-if="isExpanded" class="expanded-form">
      <!-- 展开的表单内容 -->
    </div>
    <button @click="isExpanded = !isExpanded" class="toggle-btn">
      {{ isExpanded ? '收起' : '展开' }}
    </button>
  </div>
</template>

接下来，在样式中，可以定义展开与收起的 CSS 类样式，例如：

<style>
  .expanded-form {
    display: block;
    /* 其他展开时的样式 */
  }
  .toggle-btn {
    /* 其他按钮样式 */
  }
</style>

需要注意的是，以上只是一个简单的示例，并没有包含所有的 CSS 样式，请根据实际需要进行调整和完善。另外，可以根据具体的需求，自定义展开与收起的样式，并在模板中添加合适的 CSS 类。