列表

v-list 组件用于显示信息，它可以包含一个头像、内容、操作、列表组标题等等。列表也可以包含子元素并在侧边栏（sidebar）使用。

如果您要查找有状态列表项，请查看 v-list-item-group。

用例

列表有三个主要变量。single-line （默认）, two-line 和 three-line。 行声明指定了项目的最小高度，也可以使用相同的属性从 v-list 中进行控制。

template

  1. <template>
  2.   <v-card
  3.     class="mx-auto"
  4.     max-width="400"
  5.     tile
  6.   >
  7.     <v-list-item>
  8.       <v-list-item-content>
  9.         <v-list-item-title>Single-line item</v-list-item-title>
  10.       </v-list-item-content>
  11.     </v-list-item>
  13.     <v-list-item two-line>
  14.       <v-list-item-content>
  15.         <v-list-item-title>Two-line item</v-list-item-title>
  16.         <v-list-item-subtitle>Secondary text</v-list-item-subtitle>
  17.       </v-list-item-content>
  18.     </v-list-item>
  20.     <v-list-item three-line>
  21.       <v-list-item-content>
  22.         <v-list-item-title>Three-line item</v-list-item-title>
  23.         <v-list-item-subtitle>
  24.           Secondary line text Lorem ipsum dolor sit amet,
  25.         </v-list-item-subtitle>
  26.         <v-list-item-subtitle>
  27.           consectetur adipiscing elit.
  28.         </v-list-item-subtitle>
  29.       </v-list-item-content>
  30.     </v-list-item>
  31.   </v-card>
  32. </template>

Lists（列表） - 图1

API

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

Lists（列表） - 图2

实战场

template script

  1. <template>
  2.   <v-row align="center">
  3.     <v-row justify="space-around">
  4.       <v-switch v-model="disabled" class="ma-2" label="Disabled"></v-switch>
  5.       <v-switch v-model="dense" class="ma-2" label="Dense"></v-switch>
  6.       <v-switch v-model="twoLine" class="ma-2" label="Two-line"></v-switch>
  7.       <v-switch v-model="threeLine" class="ma-2" label="Three-line"></v-switch>
  8.       <v-switch v-model="shaped" class="ma-2" label="Shaped"></v-switch>
  9.       <v-switch v-model="flat" class="ma-2" label="Flat"></v-switch>
  10.       <v-switch v-model="subheader" class="ma-2" label="Subheader"></v-switch>
  11.       <v-switch v-model="inactive" class="ma-2" label="Inactive"></v-switch>
  12.       <v-switch v-model="subGroup" class="ma-2" label="Sub-group"></v-switch>
  13.       <v-switch v-model="nav" class="ma-2" label="Nav"></v-switch>
  14.       <v-switch v-model="avatar" class="ma-2" label="Avatar"></v-switch>
  15.       <v-switch v-model="rounded" class="ma-2" label="Rounded"></v-switch>
  16.     </v-row>
  17.     <v-card
  18.       class="mx-auto"
  19.       max-width="400"
  20.       tile
  21.     >
  22.       <v-list
  23.         :disabled="disabled"
  24.         :dense="dense"
  25.         :two-line="twoLine"
  26.         :three-line="threeLine"
  27.         :shaped="shaped"
  28.         :flat="flat"
  29.         :subheader="subheader"
  30.         :sub-group="subGroup"
  31.         :nav="nav"
  32.         :avatar="avatar"
  33.         :rounded="rounded"
  34.       >
  35.         <v-subheader>REPORTS</v-subheader>
  36.         <v-list-item-group v-model="item" color="primary">
  37.           <v-list-item
  38.             v-for="(item, i) in items"
  39.             :key="i"
  40.             :inactive="inactive"
  41.           >
  42.             <v-list-item-avatar v-if="avatar">
  43.               <v-img :src="item.avatar"></v-img>
  44.             </v-list-item-avatar>
  45.             <v-list-item-content>
  46.               <v-list-item-title v-html="item.title"></v-list-item-title>
  47.               <v-list-item-subtitle v-if="twoLine || threeLine" v-html="item.subtitle"></v-list-item-subtitle>
  48.             </v-list-item-content>
  49.           </v-list-item>
  50.         </v-list-item-group>
  51.       </v-list>
  52.     </v-card>
  53.   </v-row>
  54. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       item: 5,
  5.       items: [
  6.         {
  7.           avatar: 'https://cdn.vuetifyjs.com/images/lists/1.jpg',
  8.           title: 'Brunch this weekend?',
  9.           subtitle: "<span class='text--primary'>Ali Connors</span> &mdash; I'll be in your neighborhood doing errands this weekend. Do you want to hang out?",
  10.         },
  11.         {
  12.           avatar: 'https://cdn.vuetifyjs.com/images/lists/2.jpg',
  13.           title: 'Summer BBQ <span class="grey--text text--lighten-1">4</span>',
  14.           subtitle: "<span class='text--primary'>to Alex, Scott, Jennifer</span> &mdash; Wish I could come, but I'm out of town this weekend.",
  15.         },
  16.         {
  17.           avatar: 'https://cdn.vuetifyjs.com/images/lists/3.jpg',
  18.           title: 'Oui oui',
  19.           subtitle: "<span class='text--primary'>Sandra Adams</span> &mdash; Do you have Paris recommendations? Have you ever been?",
  20.         },
  21.         {
  22.           avatar: 'https://cdn.vuetifyjs.com/images/lists/4.jpg',
  23.           title: 'Birthday gift',
  24.           subtitle: "<span class='text--primary'>Trevor Hansen</span> &mdash; Have any ideas about what we should get Heidi for her birthday?",
  25.         },
  26.         {
  27.           avatar: 'https://cdn.vuetifyjs.com/images/lists/5.jpg',
  28.           title: 'Recipe to try',
  29.           subtitle: "<span class='text--primary'>Britta Holt</span> &mdash; We should eat this: Grate, Squash, Corn, and tomatillo Tacos.",
  30.         },
  31.       ],
  32.       disabled: false,
  33.       dense: false,
  34.       twoLine: false,
  35.       threeLine: false,
  36.       shaped: false,
  37.       flat: false,
  38.       subheader: false,
  39.       inactive: false,
  40.       subGroup: false,
  41.       nav: false,
  42.       avatar: false,
  43.       rounded: false,
  44.     }),
  45.   }
  46. </script>

Lists（列表） - 图3

示例

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

已禁用列表

您不能与禁用的 v-list 互动。

template script

  1. <template>
  2.   <v-card
  3.     class="mx-auto"
  4.     max-width="300"
  5.     tile
  6.   >
  7.     <v-list disabled>
  8.       <v-subheader>REPORTS</v-subheader>
  9.       <v-list-item-group v-model="item" color="primary">
  10.         <v-list-item
  11.           v-for="(item, i) in items"
  12.           :key="i"
  13.         >
  14.           <v-list-item-icon>
  15.             <v-icon v-text="item.icon"></v-icon>
  16.           </v-list-item-icon>
  17.           <v-list-item-content>
  18.             <v-list-item-title v-text="item.text"></v-list-item-title>
  19.           </v-list-item-content>
  20.         </v-list-item>
  21.       </v-list-item-group>
  22.     </v-list>
  23.   </v-card>
  24. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       item: 1,
  5.       items: [
  6.         { text: 'Real-Time', icon: 'mdi-clock' },
  7.         { text: 'Audience', icon: 'mdi-account' },
  8.         { text: 'Conversions', icon: 'mdi-flag' },
  9.       ],
  10.     }),
  11.   }
  12. </script>

Lists（列表） - 图4

形状列表

形状列表在 v-list-item 的一侧具有圆形边界。

template script

  1. <template>
  2.   <v-card
  3.     class="mx-auto"
  4.     max-width="300"
  5.     tile
  6.   >
  7.     <v-list shaped>
  8.       <v-subheader>REPORTS</v-subheader>
  9.       <v-list-item-group v-model="item" color="primary">
  10.         <v-list-item
  11.           v-for="(item, i) in items"
  12.           :key="i"
  13.         >
  14.           <v-list-item-icon>
  15.             <v-icon v-text="item.icon"></v-icon>
  16.           </v-list-item-icon>
  17.           <v-list-item-content>
  18.             <v-list-item-title v-text="item.text"></v-list-item-title>
  19.           </v-list-item-content>
  20.         </v-list-item>
  21.       </v-list-item-group>
  22.     </v-list>
  23.   </v-card>
  24. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       item: 1,
  5.       items: [
  6.         { text: 'Real-Time', icon: 'mdi-clock' },
  7.         { text: 'Audience', icon: 'mdi-account' },
  8.         { text: 'Conversions', icon: 'mdi-flag' },
  9.       ],
  10.     }),
  11.   }
  12. </script>

Lists（列表） - 图5

密集

v-list 可以通过 dense 属性变密集。

template script

  1. <template>
  2.   <v-card
  3.     class="mx-auto"
  4.     max-width="300"
  5.     tile
  6.   >
  7.     <v-list dense>
  8.       <v-subheader>REPORTS</v-subheader>
  9.       <v-list-item-group v-model="item" color="primary">
  10.         <v-list-item
  11.           v-for="(item, i) in items"
  12.           :key="i"
  13.         >
  14.           <v-list-item-icon>
  15.             <v-icon v-text="item.icon"></v-icon>
  16.           </v-list-item-icon>
  17.           <v-list-item-content>
  18.             <v-list-item-title v-text="item.text"></v-list-item-title>
  19.           </v-list-item-content>
  20.         </v-list-item>
  21.       </v-list-item-group>
  22.     </v-list>
  23.   </v-card>
  24. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       item: 1,
  5.       items: [
  6.         { text: 'Real-Time', icon: 'mdi-clock' },
  7.         { text: 'Audience', icon: 'mdi-account' },
  8.         { text: 'Conversions', icon: 'mdi-flag' },
  9.       ],
  10.     }),
  11.   }
  12. </script>

Lists（列表） - 图6

扁平

在 flat 属性的 v-list 中选择时，项目不会发生变化。

template script

  1. <template>
  2.   <v-card
  3.     class="mx-auto"
  4.     max-width="300"
  5.     tile
  6.   >
  7.     <v-list flat>
  8.       <v-subheader>REPORTS</v-subheader>
  9.       <v-list-item-group v-model="item" color="primary">
  10.         <v-list-item
  11.           v-for="(item, i) in items"
  12.           :key="i"
  13.         >
  14.           <v-list-item-icon>
  15.             <v-icon v-text="item.icon"></v-icon>
  16.           </v-list-item-icon>
  17.           <v-list-item-content>
  18.             <v-list-item-title v-text="item.text"></v-list-item-title>
  19.           </v-list-item-content>
  20.         </v-list-item>
  21.       </v-list-item-group>
  22.     </v-list>
  23.   </v-card>
  24. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       item: 1,
  5.       items: [
  6.         { text: 'Real-Time', icon: 'mdi-clock' },
  7.         { text: 'Audience', icon: 'mdi-account' },
  8.         { text: 'Conversions', icon: 'mdi-flag' },
  9.       ],
  10.     }),
  11.   }
  12. </script>

Lists（列表） - 图7

圆角

你可以让 v-list 项变成圆角。

template script

  1. <template>
  2.   <v-card
  3.     class="mx-auto"
  4.     max-width="300"
  5.     tile
  6.   >
  7.     <v-list rounded>
  8.       <v-subheader>REPORTS</v-subheader>
  9.       <v-list-item-group v-model="item" color="primary">
  10.         <v-list-item
  11.           v-for="(item, i) in items"
  12.           :key="i"
  13.         >
  14.           <v-list-item-icon>
  15.             <v-icon v-text="item.icon"></v-icon>
  16.           </v-list-item-icon>
  17.           <v-list-item-content>
  18.             <v-list-item-title v-text="item.text"></v-list-item-title>
  19.           </v-list-item-content>
  20.         </v-list-item>
  21.       </v-list-item-group>
  22.     </v-list>
  23.   </v-card>
  24. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       item: 1,
  5.       items: [
  6.         { text: 'Real-Time', icon: 'mdi-clock' },
  7.         { text: 'Audience', icon: 'mdi-account' },
  8.         { text: 'Conversions', icon: 'mdi-flag' },
  9.       ],
  10.     }),
  11.   }
  12. </script>

Lists（列表） - 图8

头像和列表项标题操作的组合

列表中还包含有插槽，可以采用更明确的方法。如果你选择了这种方法，请记住你必须提供额外的 props，以获得正确的间距。在这个例子中，我们有一个带头像的标题，所以我们必须提供一个 avatar 属性。

template script

  1. <template>
  2.   <v-card
  3.     max-width="500"
  4.     class="mx-auto"
  5.   >
  6.     <v-toolbar
  7.       color="indigo"
  8.       dark
  9.     >
  10.       <v-app-bar-nav-icon></v-app-bar-nav-icon>
  12.       <v-toolbar-title>Inbox</v-toolbar-title>
  14.       <v-spacer></v-spacer>
  16.       <v-btn icon>
  17.         <v-icon>mdi-magnify</v-icon>
  18.       </v-btn>
  20.       <v-btn icon>
  21.         <v-icon>mdi-dots-vertical</v-icon>
  22.       </v-btn>
  23.     </v-toolbar>
  24.     <v-list>
  25.       <v-list-item
  26.         v-for="item in items"
  27.         :key="item.title"
  28.         @click=""
  29.       >
  30.         <v-list-item-icon>
  31.           <v-icon v-if="item.icon" color="pink">mdi-star</v-icon>
  32.         </v-list-item-icon>
  34.         <v-list-item-content>
  35.           <v-list-item-title v-text="item.title"></v-list-item-title>
  36.         </v-list-item-content>
  38.         <v-list-item-avatar>
  39.           <v-img :src="item.avatar"></v-img>
  40.         </v-list-item-avatar>
  41.       </v-list-item>
  42.     </v-list>
  43.   </v-card>
  44. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         items: [
  6.           { icon: true, title: 'Jason Oner', avatar: 'https://cdn.vuetifyjs.com/images/lists/1.jpg' },
  7.           { title: 'Travis Howard', avatar: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
  8.           { title: 'Ali Connors', avatar: 'https://cdn.vuetifyjs.com/images/lists/3.jpg' },
  9.           { title: 'Cindy Baker', avatar: 'https://cdn.vuetifyjs.com/images/lists/4.jpg' },
  10.         ],
  11.       }
  12.     },
  13.   }
  14. </script>

Lists（列表） - 图9

具有两行内容加上图标的操作

列表组件可以包含列表组标题，分割线，以及1行或者更多行，如果副标题文本溢出则会以省略号的形式截断文本

template script

  1. <template>
  2.   <v-card
  3.     max-width="600"
  4.     class="mx-auto"
  5.   >
  6.     <v-toolbar
  7.       color="light-blue"
  8.       dark
  9.     >
  10.       <v-app-bar-nav-icon></v-app-bar-nav-icon>
  12.       <v-toolbar-title>My files</v-toolbar-title>
  14.       <v-spacer></v-spacer>
  16.       <v-btn icon>
  17.         <v-icon>mdi-magnify</v-icon>
  18.       </v-btn>
  20.       <v-btn icon>
  21.         <v-icon>mdi-view-module</v-icon>
  22.       </v-btn>
  23.     </v-toolbar>
  25.     <v-list two-line subheader>
  26.       <v-subheader inset>Folders</v-subheader>
  28.       <v-list-item
  29.         v-for="item in items"
  30.         :key="item.title"
  31.         @click=""
  32.       >
  33.         <v-list-item-avatar>
  34.           <v-icon
  35.             :class="[item.iconClass]"
  36.             v-text="item.icon"
  37.           ></v-icon>
  38.         </v-list-item-avatar>
  40.         <v-list-item-content>
  41.           <v-list-item-title v-text="item.title"></v-list-item-title>
  42.           <v-list-item-subtitle v-text="item.subtitle"></v-list-item-subtitle>
  43.         </v-list-item-content>
  45.         <v-list-item-action>
  46.           <v-btn icon>
  47.             <v-icon color="grey lighten-1">mdi-information</v-icon>
  48.           </v-btn>
  49.         </v-list-item-action>
  50.       </v-list-item>
  52.       <v-divider inset></v-divider>
  54.       <v-subheader inset>Files</v-subheader>
  56.       <v-list-item
  57.         v-for="item in items2"
  58.         :key="item.title"
  59.         @click=""
  60.       >
  61.         <v-list-item-avatar>
  62.           <v-icon
  63.             :class="[item.iconClass]"
  64.             v-text="item.icon"
  65.           ></v-icon>
  66.         </v-list-item-avatar>
  68.         <v-list-item-content>
  69.           <v-list-item-title v-text="item.title"></v-list-item-title>
  70.           <v-list-item-subtitle v-text="item.subtitle"></v-list-item-subtitle>
  71.         </v-list-item-content>
  73.         <v-list-item-action>
  74.           <v-btn icon>
  75.             <v-icon color="grey lighten-1">mdi-information</v-icon>
  76.           </v-btn>
  77.         </v-list-item-action>
  78.       </v-list-item>
  79.     </v-list>
  80.   </v-card>
  81. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       items: [
  5.         { icon: 'folder', iconClass: 'grey lighten-1 white--text', title: 'Photos', subtitle: 'Jan 9, 2014' },
  6.         { icon: 'folder', iconClass: 'grey lighten-1 white--text', title: 'Recipes', subtitle: 'Jan 17, 2014' },
  7.         { icon: 'folder', iconClass: 'grey lighten-1 white--text', title: 'Work', subtitle: 'Jan 28, 2014' },
  8.       ],
  9.       items2: [
  10.         { icon: 'assignment', iconClass: 'blue white--text', title: 'Vacation itinerary', subtitle: 'Jan 20, 2014' },
  11.         { icon: 'call_to_action', iconClass: 'amber white--text', title: 'Kitchen remodel', subtitle: 'Jan 10, 2014' },
  12.       ],
  13.     }),
  14.   }
  15. </script>

Lists（列表） - 图10

头像和三行内容的组合

对于三行列表，字幕将垂直夹在 2 行，然后省略。 此功能使用 line-clamp ，并不是所有浏览器都支持此功能。

template script

  1. <template>
  2.   <v-card
  3.     max-width="450"
  4.     class="mx-auto"
  5.   >
  6.     <v-toolbar
  7.       color="cyan"
  8.       dark
  9.     >
  10.       <v-app-bar-nav-icon></v-app-bar-nav-icon>
  12.       <v-toolbar-title>Inbox</v-toolbar-title>
  14.       <v-spacer></v-spacer>
  16.       <v-btn icon>
  17.         <v-icon>mdi-magnify</v-icon>
  18.       </v-btn>
  19.     </v-toolbar>
  21.     <v-list three-line>
  22.       <template v-for="(item, index) in items">
  23.         <v-subheader
  24.           v-if="item.header"
  25.           :key="item.header"
  26.           v-text="item.header"
  27.         ></v-subheader>
  29.         <v-divider
  30.           v-else-if="item.divider"
  31.           :key="index"
  32.           :inset="item.inset"
  33.         ></v-divider>
  35.         <v-list-item
  36.           v-else
  37.           :key="item.title"
  38.           @click=""
  39.         >
  40.           <v-list-item-avatar>
  41.             <v-img :src="item.avatar"></v-img>
  42.           </v-list-item-avatar>
  44.           <v-list-item-content>
  45.             <v-list-item-title v-html="item.title"></v-list-item-title>
  46.             <v-list-item-subtitle v-html="item.subtitle"></v-list-item-subtitle>
  47.           </v-list-item-content>
  48.         </v-list-item>
  49.       </template>
  50.     </v-list>
  51.   </v-card>
  52. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       items: [
  5.         { header: 'Today' },
  6.         {
  7.           avatar: 'https://cdn.vuetifyjs.com/images/lists/1.jpg',
  8.           title: 'Brunch this weekend?',
  9.           subtitle: "<span class='text--primary'>Ali Connors</span> &mdash; I'll be in your neighborhood doing errands this weekend. Do you want to hang out?",
  10.         },
  11.         { divider: true, inset: true },
  12.         {
  13.           avatar: 'https://cdn.vuetifyjs.com/images/lists/2.jpg',
  14.           title: 'Summer BBQ <span class="grey--text text--lighten-1">4</span>',
  15.           subtitle: "<span class='text--primary'>to Alex, Scott, Jennifer</span> &mdash; Wish I could come, but I'm out of town this weekend.",
  16.         },
  17.         { divider: true, inset: true },
  18.         {
  19.           avatar: 'https://cdn.vuetifyjs.com/images/lists/3.jpg',
  20.           title: 'Oui oui',
  21.           subtitle: "<span class='text--primary'>Sandra Adams</span> &mdash; Do you have Paris recommendations? Have you ever been?",
  22.         },
  23.         { divider: true, inset: true },
  24.         {
  25.           avatar: 'https://cdn.vuetifyjs.com/images/lists/4.jpg',
  26.           title: 'Birthday gift',
  27.           subtitle: "<span class='text--primary'>Trevor Hansen</span> &mdash; Have any ideas about what we should get Heidi for her birthday?",
  28.         },
  29.         { divider: true, inset: true },
  30.         {
  31.           avatar: 'https://cdn.vuetifyjs.com/images/lists/5.jpg',
  32.           title: 'Recipe to try',
  33.           subtitle: "<span class='text--primary'>Britta Holt</span> &mdash; We should eat this: Grate, Squash, Corn, and tomatillo Tacos.",
  34.         },
  35.       ],
  36.     }),
  37.   }
  38. </script>

Lists（列表） - 图11

Vue School

Learn Vue.js and modern and cutting-edge front-end technologies with our premium tutorials and video courses.

ads by Vuetify

](https://vueschool.io/?ref=vuetifyjs.com&friend=vuetify)

头像和列表项标题操作的组合

当使用一个 lists 插槽时，你必须手动定义它是否包含列表组标题（headers）或者列表项是否包含 avatar，这样做是为了确保正确的间距。

template script

  1. <template>
  2.   <v-card
  3.     max-width="500"
  4.     class="mx-auto"
  5.   >
  6.     <v-toolbar
  7.       color="deep-purple accent-4"
  8.       dark
  9.     >
  10.       <v-app-bar-nav-icon></v-app-bar-nav-icon>
  12.       <v-toolbar-title>New Chat</v-toolbar-title>
  14.       <v-spacer></v-spacer>
  16.       <v-btn icon>
  17.         <v-icon>mdi-magnify</v-icon>
  18.       </v-btn>
  19.     </v-toolbar>
  21.     <v-list subheader>
  22.       <v-subheader>Recent chat</v-subheader>
  24.       <v-list-item
  25.         v-for="item in items"
  26.         :key="item.title"
  27.         @click=""
  28.       >
  29.         <v-list-item-avatar>
  30.           <v-img :src="item.avatar"></v-img>
  31.         </v-list-item-avatar>
  33.         <v-list-item-content>
  34.           <v-list-item-title v-text="item.title"></v-list-item-title>
  35.         </v-list-item-content>
  37.         <v-list-item-icon>
  38.           <v-icon :color="item.active ? 'deep-purple accent-4' : 'grey'">chat_bubble</v-icon>
  39.         </v-list-item-icon>
  40.       </v-list-item>
  41.     </v-list>
  43.     <v-divider></v-divider>
  45.     <v-list subheader>
  46.       <v-subheader>Previous chats</v-subheader>
  48.       <v-list-item
  49.         v-for="item in items2"
  50.         :key="item.title"
  51.         @click=""
  52.       >
  53.         <v-list-item-avatar>
  54.           <v-img :src="item.avatar"></v-img>
  55.         </v-list-item-avatar>
  57.         <v-list-item-content>
  58.           <v-list-item-title v-text="item.title"></v-list-item-title>
  59.         </v-list-item-content>
  60.       </v-list-item>
  61.     </v-list>
  62.   </v-card>
  63. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       items: [
  5.         { active: true, title: 'Jason Oner', avatar: 'https://cdn.vuetifyjs.com/images/lists/1.jpg' },
  6.         { active: true, title: 'Ranee Carlson', avatar: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
  7.         { title: 'Cindy Baker', avatar: 'https://cdn.vuetifyjs.com/images/lists/3.jpg' },
  8.         { title: 'Ali Connors', avatar: 'https://cdn.vuetifyjs.com/images/lists/4.jpg' },
  9.       ],
  10.       items2: [
  11.         { title: 'Travis Howard', avatar: 'https://cdn.vuetifyjs.com/images/lists/5.jpg' },
  12.       ],
  13.     }),
  14.   }
  15. </script>

Lists（列表） - 图12

嵌套列表

使用 v-list-group 组件，您可以使用 sub-group 属性创建多达 2 级的深度。

template script

  1. <template>
  2.   <v-card
  3.     class="mx-auto"
  4.     width="300"
  5.   >
  6.     <v-list>
  7.       <v-list-item>
  8.         <v-list-item-icon>
  9.           <v-icon>mdi-home</v-icon>
  10.         </v-list-item-icon>
  12.         <v-list-item-title>Home</v-list-item-title>
  13.       </v-list-item>
  15.       <v-list-group
  16.         prepend-icon="account_circle"
  17.         value="true"
  18.       >
  19.         <template v-slot:activator>
  20.           <v-list-item-title>Users</v-list-item-title>
  21.         </template>
  23.         <v-list-group
  24.           no-action
  25.           sub-group
  26.           value="true"
  27.         >
  28.           <template v-slot:activator>
  29.             <v-list-item-content>
  30.               <v-list-item-title>Admin</v-list-item-title>
  31.             </v-list-item-content>
  32.           </template>
  34.           <v-list-item
  35.             v-for="(admin, i) in admins"
  36.             :key="i"
  37.             link
  38.           >
  39.             <v-list-item-title v-text="admin[0]"></v-list-item-title>
  40.             <v-list-item-icon>
  41.               <v-icon v-text="admin[1]"></v-icon>
  42.             </v-list-item-icon>
  43.           </v-list-item>
  44.         </v-list-group>
  46.         <v-list-group
  47.           sub-group
  48.           no-action
  49.         >
  50.           <template v-slot:activator>
  51.             <v-list-item-content>
  52.               <v-list-item-title>Actions</v-list-item-title>
  53.             </v-list-item-content>
  54.           </template>
  55.           <v-list-item
  56.             v-for="(crud, i) in cruds"
  57.             :key="i"
  58.             @click=""
  59.           >
  60.             <v-list-item-title v-text="crud[0]"></v-list-item-title>
  61.             <v-list-item-action>
  62.               <v-icon v-text="crud[1]"></v-icon>
  63.             </v-list-item-action>
  64.           </v-list-item>
  65.         </v-list-group>
  66.       </v-list-group>
  67.     </v-list>
  68.   </v-card>
  69. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       admins: [
  5.         ['Management', 'people_outline'],
  6.         ['Settings', 'settings'],
  7.       ],
  8.       cruds: [
  9.         ['Create', 'add'],
  10.         ['Read', 'insert_drive_file'],
  11.         ['Update', 'update'],
  12.         ['Delete', 'delete'],
  13.       ],
  14.     }),
  15.   }
  16. </script>

Lists（列表） - 图13

列表组标题和分割线

Lists 组件可以包含多个列表组标题和分割线。

template script

  1. <template>
  2.   <v-card
  3.     max-width="475"
  4.     class="mx-auto"
  5.   >
  6.     <v-toolbar
  7.       color="teal"
  8.       dark
  9.     >
  10.       <v-app-bar-nav-icon></v-app-bar-nav-icon>
  12.       <v-toolbar-title>Settings</v-toolbar-title>
  13.     </v-toolbar>
  15.     <v-list two-line subheader>
  16.       <v-subheader>General</v-subheader>
  18.       <v-list-item>
  19.         <v-list-item-content>
  20.           <v-list-item-title>Profile photo</v-list-item-title>
  21.           <v-list-item-subtitle>Change your Google+ profile photo</v-list-item-subtitle>
  22.         </v-list-item-content>
  23.       </v-list-item>
  25.       <v-list-item>
  26.         <v-list-item-content>
  27.           <v-list-item-title>Show your status</v-list-item-title>
  28.           <v-list-item-subtitle>Your status is visible to everyone</v-list-item-subtitle>
  29.         </v-list-item-content>
  30.       </v-list-item>
  31.     </v-list>
  33.     <v-divider></v-divider>
  35.     <v-list
  36.       subheader
  37.       two-line
  38.       flat
  39.     >
  40.       <v-subheader>Hangout notifications</v-subheader>
  42.       <v-list-item-group
  43.         v-model="settings"
  44.         multiple
  45.       >
  46.         <v-list-item>
  47.           <template v-slot:default="{ active, toggle }">
  48.             <v-list-item-action>
  49.               <v-checkbox
  50.                 v-model="active"
  51.                 color="primary"
  52.                 @click="toggle"
  53.               ></v-checkbox>
  54.             </v-list-item-action>
  56.             <v-list-item-content>
  57.               <v-list-item-title>Notifications</v-list-item-title>
  58.               <v-list-item-subtitle>Allow notifications</v-list-item-subtitle>
  59.             </v-list-item-content>
  60.           </template>
  61.         </v-list-item>
  63.         <v-list-item>
  64.           <template v-slot:default="{ active, toggle }">
  65.             <v-list-item-action>
  66.               <v-checkbox
  67.                 v-model="active"
  68.                 color="primary"
  69.                 @click="toggle"
  70.               ></v-checkbox>
  71.             </v-list-item-action>
  73.             <v-list-item-content>
  74.               <v-list-item-title>Sound</v-list-item-title>
  75.               <v-list-item-subtitle>Hangouts message</v-list-item-subtitle>
  76.             </v-list-item-content>
  77.           </template>
  78.         </v-list-item>
  80.         <v-list-item>
  81.           <template v-slot:default="{ active, toggle }">
  82.             <v-list-item-action>
  83.               <v-checkbox
  84.                 v-model="active"
  85.                 color="primary"
  86.                 @click="toggle"
  87.               ></v-checkbox>
  88.             </v-list-item-action>
  90.             <v-list-item-content>
  91.               <v-list-item-title>Video sounds</v-list-item-title>
  92.               <v-list-item-subtitle>Hangouts video call</v-list-item-subtitle>
  93.             </v-list-item-content>
  94.           </template>
  95.         </v-list-item>
  97.         <v-list-item>
  98.           <template v-slot:default="{ active, toggle }">
  99.             <v-list-item-action>
  100.               <v-checkbox
  101.                 v-model="active"
  102.                 color="primary"
  103.                 @click="toggle"
  104.               ></v-checkbox>
  105.             </v-list-item-action>
  107.             <v-list-item-content>
  108.               <v-list-item-title>Invites</v-list-item-title>
  109.               <v-list-item-subtitle>Notify when receiving invites</v-list-item-subtitle>
  110.             </v-list-item-content>
  111.           </template>
  112.         </v-list-item>
  113.       </v-list-item-group>
  114.     </v-list>
  115.   </v-card>
  116. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       settings: [],
  5.     }),
  6.   }
  7. </script>

Lists（列表） - 图14

图像卡片和工具栏以及列表的组合

一个列表可以和卡片组合。

template

  1. <template>
  2.   <v-card
  3.     max-width="375"
  4.     class="mx-auto"
  5.   >
  6.     <v-img
  7.       src="https://cdn.vuetifyjs.com/images/lists/ali.png"
  8.       height="300px"
  9.       dark
  10.     >
  11.       <v-row class="fill-height">
  12.         <v-card-title>
  13.           <v-btn dark icon>
  14.             <v-icon>mdi-chevron-left</v-icon>
  15.           </v-btn>
  17.           <v-spacer></v-spacer>
  19.           <v-btn dark icon class="mr-4">
  20.             <v-icon>mdi-pencil</v-icon>
  21.           </v-btn>
  23.           <v-btn dark icon>
  24.             <v-icon>mdi-dots-vertical</v-icon>
  25.           </v-btn>
  26.         </v-card-title>
  28.         <v-spacer></v-spacer>
  30.         <v-card-title class="white--text pl-12 pt-12">
  31.           <div class="display-1 pl-12 pt-12">Ali Conners</div>
  32.         </v-card-title>
  33.       </v-row>
  34.     </v-img>
  36.     <v-list two-line>
  37.       <v-list-item @click="">
  38.         <v-list-item-icon>
  39.           <v-icon color="indigo">mdi-phone</v-icon>
  40.         </v-list-item-icon>
  42.         <v-list-item-content>
  43.           <v-list-item-title>(650) 555-1234</v-list-item-title>
  44.           <v-list-item-subtitle>Mobile</v-list-item-subtitle>
  45.         </v-list-item-content>
  47.         <v-list-item-icon>
  48.           <v-icon>mdi-message-text</v-icon>
  49.         </v-list-item-icon>
  50.       </v-list-item>
  52.       <v-list-item @click="">
  53.         <v-list-item-action></v-list-item-action>
  55.         <v-list-item-content>
  56.           <v-list-item-title>(323) 555-6789</v-list-item-title>
  57.           <v-list-item-subtitle>Work</v-list-item-subtitle>
  58.         </v-list-item-content>
  60.         <v-list-item-icon>
  61.           <v-icon>mdi-message-text</v-icon>
  62.         </v-list-item-icon>
  63.       </v-list-item>
  65.       <v-divider inset></v-divider>
  67.       <v-list-item @click="">
  68.         <v-list-item-icon>
  69.           <v-icon color="indigo">mdi-email</v-icon>
  70.         </v-list-item-icon>
  72.         <v-list-item-content>
  73.           <v-list-item-title>aliconnors@example.com</v-list-item-title>
  74.           <v-list-item-subtitle>Personal</v-list-item-subtitle>
  75.         </v-list-item-content>
  76.       </v-list-item>
  78.       <v-list-item @click="">
  79.         <v-list-item-action></v-list-item-action>
  81.         <v-list-item-content>
  82.           <v-list-item-title>ali_connors@example.com</v-list-item-title>
  83.           <v-list-item-subtitle>Work</v-list-item-subtitle>
  84.         </v-list-item-content>
  85.       </v-list-item>
  87.       <v-divider inset></v-divider>
  89.       <v-list-item @click="">
  90.         <v-list-item-icon>
  91.           <v-icon color="indigo">mdi-map-marker</v-icon>
  92.         </v-list-item-icon>
  94.         <v-list-item-content>
  95.           <v-list-item-title>1400 Main Street</v-list-item-title>
  96.           <v-list-item-subtitle>Orlando, FL 79938</v-list-item-subtitle>
  97.         </v-list-item-content>
  98.       </v-list-item>
  99.     </v-list>
  100.   </v-card>
  101. </template>

Lists（列表） - 图15

列表项的标题和子标题, 操作与操作文本说明

列表组件可以包含一个操作栈。波纹效果和路由属性也可以应用到 v-list 甚至 v-list-item中，或者作为列表项数组的一个属性。

template script

  1. <template>
  2.   <v-card
  3.     max-width="500"
  4.     class="mx-auto"
  5.   >
  6.     <v-toolbar
  7.       color="pink"
  8.       dark
  9.     >
  10.       <v-app-bar-nav-icon></v-app-bar-nav-icon>
  12.       <v-toolbar-title>Inbox</v-toolbar-title>
  14.       <v-spacer></v-spacer>
  16.       <v-btn icon>
  17.         <v-icon>mdi-magnify</v-icon>
  18.       </v-btn>
  20.       <v-btn icon>
  21.         <v-icon>mdi-checkbox-marked-circle</v-icon>
  22.       </v-btn>
  23.     </v-toolbar>
  25.     <v-list two-line>
  26.       <v-list-item-group
  27.         v-model="selected"
  28.         multiple
  29.         active-class="pink--text"
  30.       >
  31.         <template v-for="(item, index) in items">
  32.           <v-list-item :key="item.title">
  33.             <template v-slot:default="{ active, toggle }">
  34.               <v-list-item-content>
  35.                 <v-list-item-title v-text="item.title"></v-list-item-title>
  36.                 <v-list-item-subtitle class="text--primary" v-text="item.headline"></v-list-item-subtitle>
  37.                 <v-list-item-subtitle v-text="item.subtitle"></v-list-item-subtitle>
  38.               </v-list-item-content>
  40.               <v-list-item-action>
  41.                 <v-list-item-action-text v-text="item.action"></v-list-item-action-text>
  42.                 <v-icon
  43.                   v-if="!active"
  44.                   color="grey lighten-1"
  45.                 >
  46.                   star_border
  47.                 </v-icon>
  49.                 <v-icon
  50.                   v-else
  51.                   color="yellow"
  52.                 >
  53.                   star
  54.                 </v-icon>
  55.               </v-list-item-action>
  56.             </template>
  57.           </v-list-item>
  59.           <v-divider
  60.             v-if="index + 1 < items.length"
  61.             :key="index"
  62.           ></v-divider>
  63.         </template>
  64.       </v-list-item-group>
  65.     </v-list>
  66.   </v-card>
  67. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       selected: [2],
  5.       items: [
  6.         {
  7.           action: '15 min',
  8.           headline: 'Brunch this weekend?',
  9.           title: 'Ali Connors',
  10.           subtitle: "I'll be in your neighborhood doing errands this weekend. Do you want to hang out?",
  11.         },
  12.         {
  13.           action: '2 hr',
  14.           headline: 'Summer BBQ',
  15.           title: 'me, Scrott, Jennifer',
  16.           subtitle: "Wish I could come, but I'm out of town this weekend.",
  17.         },
  18.         {
  19.           action: '6 hr',
  20.           headline: 'Oui oui',
  21.           title: 'Sandra Adams',
  22.           subtitle: 'Do you have Paris recommendations? Have you ever been?',
  23.         },
  24.         {
  25.           action: '12 hr',
  26.           headline: 'Birthday gift',
  27.           title: 'Trevor Hansen',
  28.           subtitle: 'Have any ideas about what we should get Heidi for her birthday?',
  29.         },
  30.         {
  31.           action: '18hr',
  32.           headline: 'Recipe to try',
  33.           title: 'Britta Holt',
  34.           subtitle: 'We should eat this: Grate, Squash, Corn, and tomatillo Tacos.',
  35.         },
  36.       ],
  37.     }),
  38.   }
  39. </script>

Lists（列表） - 图16

操作和标题以及副标题的组合

可操作的 three-line 列表。 利用 v-list-item-group，轻松将动作连接到图块。

template script

  1. <template>
  2.   <v-card
  3.     class="mx-auto"
  4.     max-width="400"
  5.   >
  6.     <v-toolbar
  7.       color="purple"
  8.       dark
  9.     >
  10.       <v-app-bar-nav-icon></v-app-bar-nav-icon>
  12.       <v-toolbar-title>Settings</v-toolbar-title>
  14.       <v-spacer></v-spacer>
  16.       <v-btn icon>
  17.         <v-icon>mdi-magnify</v-icon>
  18.       </v-btn>
  19.     </v-toolbar>
  21.     <v-list
  22.       subheader
  23.       three-line
  24.     >
  25.       <v-subheader>User Controls</v-subheader>
  27.       <v-list-item>
  28.         <v-list-item-content>
  29.           <v-list-item-title>Content filtering</v-list-item-title>
  30.           <v-list-item-subtitle>Set the content filtering level to restrict appts that can be downloaded</v-list-item-subtitle>
  31.         </v-list-item-content>
  32.       </v-list-item>
  34.       <v-list-item>
  35.         <v-list-item-content>
  36.           <v-list-item-title>Password</v-list-item-title>
  37.           <v-list-item-subtitle>Require password for purchase or use password to restrict purchase</v-list-item-subtitle>
  38.         </v-list-item-content>
  39.       </v-list-item>
  40.     </v-list>
  42.     <v-divider></v-divider>
  44.     <v-list
  45.       flat
  46.       subheader
  47.       three-line
  48.     >
  49.       <v-subheader>General</v-subheader>
  51.       <v-list-item-group
  52.         v-model="settings"
  53.         multiple
  54.         active-class=""
  55.       >
  56.         <v-list-item>
  57.           <template v-slot:default="{ active }">
  58.             <v-list-item-action>
  59.               <v-checkbox v-model="active"></v-checkbox>
  60.             </v-list-item-action>
  62.             <v-list-item-content>
  63.               <v-list-item-title>Notifications</v-list-item-title>
  64.               <v-list-item-subtitle>Notify me about updates to apps or games that I downloaded</v-list-item-subtitle>
  65.             </v-list-item-content>
  66.           </template>
  67.         </v-list-item>
  69.         <v-list-item>
  70.           <template v-slot:default="{ active }">
  71.             <v-list-item-action>
  72.               <v-checkbox v-model="active"></v-checkbox>
  73.             </v-list-item-action>
  75.             <v-list-item-content>
  76.               <v-list-item-title>Sound</v-list-item-title>
  77.               <v-list-item-subtitle>Auto-update apps at any time. Data charges may apply</v-list-item-subtitle>
  78.             </v-list-item-content>
  79.           </template>
  80.         </v-list-item>
  82.         <v-list-item>
  83.           <template v-slot:default="{ active }">
  84.             <v-list-item-action>
  85.               <v-checkbox v-model="active"></v-checkbox>
  86.             </v-list-item-action>
  88.             <v-list-item-content>
  89.               <v-list-item-title>Auto-add widgets</v-list-item-title>
  90.               <v-list-item-subtitle>Automatically add home screen widgets when downloads complete</v-list-item-subtitle>
  91.             </v-list-item-content>
  92.           </template>
  93.         </v-list-item>
  94.       </v-list-item-group>
  95.     </v-list>
  96.   </v-card>
  97. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         settings: [],
  6.       }
  7.     },
  8.   }
  9. </script>

Lists（列表） - 图17

可展开的列表

列表可以包含一组项目，这些项目将在单击时显示。 扩展列表也用于 v-navigation-drawer 组件中。

template script

  1. <template>
  2.   <v-card
  3.     max-width="500"
  4.     class="mx-auto"
  5.   >
  6.     <v-toolbar
  7.       color="teal"
  8.       dark
  9.     >
  10.       <v-app-bar-nav-icon></v-app-bar-nav-icon>
  12.       <v-toolbar-title>Topics</v-toolbar-title>
  14.       <v-spacer></v-spacer>
  16.       <v-btn icon>
  17.         <v-icon>mdi-dots-vertical</v-icon>
  18.       </v-btn>
  19.     </v-toolbar>
  21.     <v-list>
  22.       <v-list-group
  23.         v-for="item in items"
  24.         :key="item.title"
  25.         v-model="item.active"
  26.         :prepend-icon="item.action"
  27.         no-action
  28.       >
  29.         <template v-slot:activator>
  30.           <v-list-item-content>
  31.             <v-list-item-title v-text="item.title"></v-list-item-title>
  32.           </v-list-item-content>
  33.         </template>
  35.         <v-list-item
  36.           v-for="subItem in item.items"
  37.           :key="subItem.title"
  38.           @click=""
  39.         >
  40.           <v-list-item-content>
  41.             <v-list-item-title v-text="subItem.title"></v-list-item-title>
  42.           </v-list-item-content>
  43.         </v-list-item>
  44.       </v-list-group>
  45.     </v-list>
  46.   </v-card>
  47. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         items: [
  6.           {
  7.             action: 'local_activity',
  8.             title: 'Attractions',
  9.             items: [
  10.               { title: 'List Item' },
  11.             ],
  12.           },
  13.           {
  14.             action: 'restaurant',
  15.             title: 'Dining',
  16.             active: true,
  17.             items: [
  18.               { title: 'Breakfast & brunch' },
  19.               { title: 'New American' },
  20.               { title: 'Sushi' },
  21.             ],
  22.           },
  23.           {
  24.             action: 'school',
  25.             title: 'Education',
  26.             items: [
  27.               { title: 'List Item' },
  28.             ],
  29.           },
  30.           {
  31.             action: 'directions_run',
  32.             title: 'Family',
  33.             items: [
  34.               { title: 'List Item' },
  35.             ],
  36.           },
  37.           {
  38.             action: 'healing',
  39.             title: 'Health',
  40.             items: [
  41.               { title: 'List Item' },
  42.             ],
  43.           },
  44.           {
  45.             action: 'content_cut',
  46.             title: 'Office',
  47.             items: [
  48.               { title: 'List Item' },
  49.             ],
  50.           },
  51.           {
  52.             action: 'local_offer',
  53.             title: 'Promotions',
  54.             items: [
  55.               { title: 'List Item' },
  56.             ],
  57.           },
  58.         ],
  59.       }
  60.     },
  61.   }
  62. </script>

Lists（列表） - 图18

导航列表

列表可以接受一个替代的 nav 样式，它减少了 v-list-item 的宽度，并增加了一个边框半径。

template script

  1. <template>
  2.   <v-card
  3.     class="mx-auto"
  4.     width="256"
  5.     tile
  6.   >
  7.     <v-navigation-drawer permanent>
  8.       <v-system-bar></v-system-bar>
  9.       <v-list>
  10.         <v-list-item>
  11.           <v-list-item-avatar>
  12.             <v-img src="https://cdn.vuetifyjs.com/images/john.png"></v-img>
  13.           </v-list-item-avatar>
  14.         </v-list-item>
  16.         <v-list-item link>
  17.           <v-list-item-content>
  18.             <v-list-item-title class="title">John Leider</v-list-item-title>
  19.             <v-list-item-subtitle>john@vuetifyjs.com</v-list-item-subtitle>
  20.           </v-list-item-content>
  22.           <v-list-item-action>
  23.             <v-icon>mdi-menu-down</v-icon>
  24.           </v-list-item-action>
  25.         </v-list-item>
  26.       </v-list>
  27.       <v-divider></v-divider>
  28.       <v-list
  29.         nav
  30.         dense
  31.       >
  32.         <v-list-item-group v-model="item" color="primary">
  33.           <v-list-item
  34.             v-for="(item, i) in items"
  35.             :key="i"
  36.           >
  37.             <v-list-item-icon>
  38.               <v-icon v-text="item.icon"></v-icon>
  39.             </v-list-item-icon>
  41.             <v-list-item-content>
  42.               <v-list-item-title v-text="item.text"></v-list-item-title>
  43.             </v-list-item-content>
  44.           </v-list-item>
  45.         </v-list-item-group>
  46.       </v-list>
  47.     </v-navigation-drawer>
  48.   </v-card>
  49. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       item: 0,
  5.       items: [
  6.         { text: 'My Files', icon: 'mdi-folder' },
  7.         { text: 'Shared with me', icon: 'mdi-account-multiple' },
  8.         { text: 'Starred', icon: 'mdi-star' },
  9.         { text: 'Recent', icon: 'mdi-history' },
  10.         { text: 'Offline', icon: 'mdi-check-circle' },
  11.         { text: 'Uploads', icon: 'mdi-upload' },
  12.         { text: 'Backups', icon: 'mdi-cloud-upload' },
  13.       ],
  14.     }),
  15.   }
  16. </script>

Lists（列表） - 图19