Vuetify是否有与WPF GroupBox功能类似的组件？

对应内置组件说明 #

你要的带标题的控件分组组件，Vuetify已经内置了两种原生支持的实现，不需要找Group开头的组件：

• v-fieldset：Vuetify 3 原生提供的表单分组组件，完全对标HTML原生<fieldset>特性，自带标题、边框样式，专门用来聚合同类型表单控件
• 低版本Vuetify或者需要自定义性更强的样式时，可以用v-card组合实现，自由度更高，可以自定义边框、背景、间距等效果
• 如果需要可折叠的分组效果，可以替换为v-expansion-panel组件，支持点击标题展开/收起分组内的控件，适合表单内容较多的场景

实现示例 #

示例1：用v-fieldset实现（Vuetify 3 推荐） #

<template>
  <v-app>
    <v-container class="pa-4">
      <!-- 基础分组 -->
      <v-fieldset legend="基础信息" class="mb-6">
        <v-text-field label="用户名" class="mb-3"></v-text-field>
        <v-text-field label="邮箱" type="email" class="mb-3"></v-text-field>
        <v-select label="性别" :items="['男','女','保密']"></v-select>
      </v-fieldset>

      <!-- 自定义样式分组 -->
      <v-fieldset legend="账号设置" color="primary" variant="outlined">
        <v-switch label="开启消息通知" class="mb-3"></v-switch>
        <v-switch label="开启登录保护" class="mb-3"></v-switch>
        <v-btn color="primary">保存设置</v-btn>
      </v-fieldset>
    </v-container>
  </v-app>
</template>

示例2：用v-card实现（兼容Vuetify 2/3，自由度高） #

<template>
  <v-app>
    <v-container class="pa-4">
      <v-card class="mb-6" elevation="2">
        <v-card-title class="text-h6 pb-0">基础信息</v-card-title>
        <v-card-text class="pt-3">
          <v-text-field label="用户名" class="mb-3"></v-text-field>
          <v-text-field label="邮箱" type="email" class="mb-3"></v-text-field>
          <v-select label="性别" :items="['男','女','保密']"></v-select>
        </v-card-text>
      </v-card>

      <v-card elevation="2">
        <v-card-title class="text-h6 pb-0">账号设置</v-card-title>
        <v-card-text class="pt-3">
          <v-switch label="开启消息通知" class="mb-3"></v-switch>
          <v-switch label="开启登录保护" class="mb-3"></v-switch>
          <v-btn color="primary">保存设置</v-btn>
        </v-card-text>
      </v-card>
    </v-container>
  </v-app>
</template>

内容的提问来源于stack exchange，提问作者Sergey