QList 和 QItem 是一组组件，它们协同工作，将多个行项目垂直排列为一个连续的整体。它们最适合以信息行的形式展示相似类型的数据，例如联系人列表、播放列表或菜单。每一行称为一个 Item（项目）。QItem 也可以在 QList 之外独立使用。

列表可以封装 Item 或类似 Item 的组件，例如 QExpansionItem 或 QSlideItem。在需要时，还可以使用 QSeparator 来分隔不同的区块。

列表项有以下预构建的子组件：

• QItemSection - 用于放置特定内容的区块。通过 avatar、thumbnail 和 side 属性来控制显示方式。不设置任何属性时，它会渲染 QItem 的主内容区域（会占据所有可用空间）。
• QItemLabel - 用于在 QItemSection 中显示预定义类型的文本内容，也可以作为 QList 本身的标题内容。

用法

基础

QItemSection

激活状态

QItemLabel

更多示例

在下面的示例中，出于演示目的，我们使用 active 属性代替 QItem 的路由属性（to、exact）。UMD 模式下没有 Vue Router，因此您无法在 Codepen/jsFiddle 中使用路由功能。

连接到 Vue Router

您可以通过绑定 <router-link> 的属性来将 QItem 与 Vue Router 结合使用。这样可以监听当前的应用路由，并在点击/轻触时触发路由导航。

<q-item to="/inbox" exact>
  <q-item-section avatar>
    <q-icon name="inbox" />
  </q-item-section>

  <q-item-section> Inbox </q-item-section>
</q-item>

您还可以延迟、取消或重定向导航，如下所示。关于下面使用的 @click 事件的详细说明，请参阅页面顶部的 QItem API 卡片。