项目组

v-item-group 提供从任何组件创建一组可选项的能力。这是组件的基础功能，如 v-tabs 和 v-carousel。

用例

v-item-group 的核心用法是创建应由 model 控制的任何事物的组。

template

  1. <template>
  2.   <v-item-group>
  3.     <v-container>
  4.       <v-row>
  5.         <v-col
  6.           v-for="n in 3"
  7.           :key="n"
  8.           cols="12"
  9.           md="4"
  10.         >
  11.           <v-item v-slot:default="{ active, toggle }">
  12.             <v-card
  13.               :color="active ? 'primary' : ''"
  14.               class="d-flex align-center"
  15.               dark
  16.               height="200"
  17.               @click="toggle"
  18.             >
  19.               <v-scroll-y-transition>
  20.                 <div
  21.                   v-if="active"
  22.                   class="display-3 flex-grow-1 text-center"
  23.                 >
  24.                   Active
  25.                 </div>
  26.               </v-scroll-y-transition>
  27.             </v-card>
  28.           </v-item>
  29.         </v-col>
  30.       </v-row>
  31.     </v-container>
  32.   </v-item-group>
  33. </template>

Item groups（项目组） - 图1

API

从下面选择您想要的组件，并查看可用的属性、插槽、事件和函数。

Item groups（项目组） - 图2

实战场

template script

  1. <template>
  2.   <v-container>
  3.     <v-row justify="space-around">
  4.       <v-switch
  5.         v-model="mandatory"
  6.         label="Mandatory"
  7.       ></v-switch>
  8.       <v-switch
  9.         v-model="multiple"
  10.         label="Multiple"
  11.       ></v-switch>
  12.       <v-col cols="12">
  13.         <v-select
  14.           v-model="type"
  15.           :items="types"
  16.           label="Item type"
  17.         ></v-select>
  18.       </v-col>
  19.     </v-row>
  21.     <v-item-group
  22.       v-model="selected"
  23.       :mandatory="mandatory"
  24.       :multiple="multiple"
  25.     >
  26.       <v-container class="pa-0">
  27.         <v-row>
  28.           <v-col
  29.             v-for="n in 3"
  30.             :key="n"
  31.             cols="12"
  32.             md="4"
  33.           >
  34.             <v-item v-slot:default="{ active, toggle }">
  35.               <v-card
  36.                 v-if="type === 'cards'"
  37.                 :color="active ? 'primary' : ''"
  38.                 class="d-flex align-center"
  39.                 dark
  40.                 height="200"
  41.                 @click="toggle"
  42.               >
  43.                 <v-scroll-y-transition>
  44.                   <div
  45.                     v-if="active"
  46.                     class="display-3 flex-grow-1 text-center"
  47.                   >
  48.                     Active
  49.                   </div>
  50.                 </v-scroll-y-transition>
  51.               </v-card>
  52.               <v-img
  53.                 v-else
  54.                 src="https://picsum.photos/id/237/200/300"
  55.                 height="150"
  56.                 class="text-right pa-2"
  57.                 @click="toggle"
  58.               >
  59.                 <v-btn
  60.                   icon
  61.                   dark
  62.                 >
  63.                   <v-icon>
  64.                     {{ active ? 'mdi-heart' : 'mdi-heart-outline' }}
  65.                   </v-icon>
  66.                 </v-btn>
  67.               </v-img>
  68.             </v-item>
  69.           </v-col>
  70.         </v-row>
  71.       </v-container>
  72.     </v-item-group>
  73.   </v-container>
  74. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       mandatory: false,
  5.       multiple: true,
  6.       selected: null,
  7.       types: [
  8.         'cards',
  9.         'images',
  10.       ],
  11.       type: 'cards',
  12.     }),
  13.     watch: {
  14.       multiple (val) {
  15.         this.selected = (val)
  16.           ? this.selected >= 0 ? [this.selected] : []
  17.           : this.selected.pop()
  18.       },
  19.     },
  20.   }
  21. </script>

Item groups（项目组） - 图3

示例

下面是一些简单到复杂的例子。

多选

项目组可以选择多个项目。

template

  1. <template>
  2.   <v-item-group multiple>
  3.     <v-container>
  4.       <v-row>
  5.         <v-col
  6.           v-for="n in 3"
  7.           :key="n"
  8.           cols="12"
  9.           md="4"
  10.         >
  11.           <v-item v-slot:default="{ active, toggle }">
  12.             <v-card
  13.               :color="active ? 'primary' : ''"
  14.               class="d-flex align-center"
  15.               dark
  16.               height="200"
  17.               @click="toggle"
  18.             >
  19.               <v-scroll-y-transition>
  20.                 <div
  21.                   v-if="active"
  22.                   class="display-3 flex-grow-1 text-center"
  23.                 >
  24.                   Active
  25.                 </div>
  26.               </v-scroll-y-transition>
  27.             </v-card>
  28.           </v-item>
  29.         </v-col>
  30.       </v-row>
  31.     </v-container>
  32.   </v-item-group>
  33. </template>

Item groups（项目组） - 图4

必填项

mandatory 项目组必须至少选择 1 个项目。

template

  1. <template>
  2.   <v-item-group mandatory>
  3.     <v-container>
  4.       <v-row>
  5.         <v-col
  6.           v-for="n in 3"
  7.           :key="n"
  8.           cols="12"
  9.           md="4"
  10.         >
  11.           <v-item v-slot:default="{ active, toggle }">
  12.             <v-card
  13.               :color="active ? 'primary' : ''"
  14.               class="d-flex align-center"
  15.               dark
  16.               height="200"
  17.               @click="toggle"
  18.             >
  19.               <v-scroll-y-transition>
  20.                 <div
  21.                   v-if="active"
  22.                   class="display-3 flex-grow-1 text-center"
  23.                 >
  24.                   Active
  25.                 </div>
  26.               </v-scroll-y-transition>
  27.             </v-card>
  28.           </v-item>
  29.         </v-col>
  30.       </v-row>
  31.     </v-container>
  32.   </v-item-group>
  33. </template>

Item groups（项目组） - 图5

带有活动类

activeClass 属性允许您在活动项目上设置自定义 CSS 类。

template

  1. <template>
  2.   <v-item-group active-class="primary">
  3.     <v-container>
  4.       <v-row>
  5.         <v-col
  6.           v-for="n in 3"
  7.           :key="n"
  8.           cols="12"
  9.           md="4"
  10.         >
  11.           <v-item v-slot:default="{ active, toggle }">
  12.             <v-card
  13.               class="d-flex align-center"
  14.               dark
  15.               height="200"
  16.               @click="toggle"
  17.             >
  18.               <v-scroll-y-transition>
  19.                 <div
  20.                   v-if="active"
  21.                   class="display-3 flex-grow-1 text-center"
  22.                 >
  23.                   Active
  24.                 </div>
  25.               </v-scroll-y-transition>
  26.             </v-card>
  27.           </v-item>
  28.         </v-col>
  29.       </v-row>
  30.     </v-container>
  31.   </v-item-group>
  32. </template>

Item groups（项目组） - 图6

Freelancer Free

A Free single page Vuetify theme for new developers.

ads by Vuetify

](https://store.vuetifyjs.com/product/freelancer-theme-free?ref=vuetifyjs.com)

自定义组

当图标允许选择或取消选择单个选项（例如将项目标记为收藏）时，它们可以用作切换按钮。

template script

  1. <template>
  2.   <v-card
  3.     max-width="400"
  4.     class="mx-auto"
  5.   >
  6.     <v-container class="pa-1">
  7.       <v-item-group
  8.         v-model="selected"
  9.         multiple
  10.       >
  11.         <v-row>
  12.           <v-col
  13.             v-for="(item, i) in items"
  14.             :key="i"
  15.             cols="12"
  16.             md="6"
  17.           >
  18.             <v-item v-slot:default="{ active, toggle }">
  19.               <v-img
  20.                 :src="`https://cdn.vuetifyjs.com/images/${item.src}`"
  21.                 height="150"
  22.                 class="text-right pa-2"
  23.                 @click="toggle"
  24.               >
  25.                 <v-btn
  26.                   icon
  27.                   dark
  28.                 >
  29.                   <v-icon>
  30.                     {{ active ? 'mdi-heart' : 'mdi-heart-outline' }}
  31.                   </v-icon>
  32.                 </v-btn>
  33.               </v-img>
  34.             </v-item>
  35.           </v-col>
  36.         </v-row>
  37.       </v-item-group>
  38.     </v-container>
  39.   </v-card>
  40. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       items: [
  5.         {
  6.           src: 'backgrounds/bg.jpg',
  7.         },
  8.         {
  9.           src: 'backgrounds/md.jpg',
  10.         },
  11.         {
  12.           src: 'backgrounds/bg-2.jpg',
  13.         },
  14.         {
  15.           src: 'backgrounds/md2.jpg',
  16.         },
  17.       ],
  18.       selected: [],
  19.     }),
  20.   }
  21. </script>

Item groups（项目组） - 图7

纸片

轻松绑定自定义纸片组。

template script

  1. <template>
  2.   <v-card>
  3.     <v-toolbar
  4.       flat
  5.       color="blue-grey"
  6.       dark
  7.     >
  8.       <v-toolbar-title>Submit a post</v-toolbar-title>
  9.     </v-toolbar>
  11.     <v-card-text>
  12.       <v-text-field filled label="Title" value="My new post"></v-text-field>
  14.       <v-textarea
  15.         filled
  16.         label="Text"
  17.         value="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse"
  18.       ></v-textarea>
  20.       <v-divider class="my-2"></v-divider>
  22.       <v-item-group multiple>
  23.         <v-subheader>Tags</v-subheader>
  24.         <v-item
  25.           v-for="n in 8"
  26.           :key="n"
  27.           v-slot:default="{ active, toggle }"
  28.         >
  29.           <v-chip
  30.             active-class="purple--text"
  31.             :input-value="active"
  32.             @click="toggle"
  33.           >
  34.             Tag {{ n }}
  35.           </v-chip>
  36.         </v-item>
  37.       </v-item-group>
  38.     </v-card-text>
  40.     <v-divider></v-divider>
  42.     <v-card-actions>
  43.       <v-spacer></v-spacer>
  44.       <v-btn
  45.         color="success"
  46.         depressed
  47.       >
  48.         Post
  49.       </v-btn>
  50.     </v-card-actions>
  51.   </v-card>
  52. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       //
  5.     }),
  6.   }
  7. </script>

Item groups（项目组） - 图8