QList 和 QItem 是可以协同工作的一组组件，以垂直方式呈现多个行项目，作为单个连续元素。它们最适合显示类似的数据类型作为信息行，例如联系列表、播放列表或菜单。每一行被称为一项。QItem 也可以在 QList 之外使用。

列表可以包含项目或类似项目的组件，例如 QExpansionItem 或 QSlideItem。此外，QSeparator 可用于在需要的地方分隔部分。

列表项具有以下预置子组件

• QItemSection - 项目部分可以在特定内容中有多种用途。它们通过 avatar、thumbnail 和 side 属性控制。没有属性时，它将渲染 QItem 的主要部分（它跨越可用空间的最大范围）。
• QItemLabel - 项目标签对 QItemSection 中的预定义文本内容类型或 QList 本身的标题式内容很有用。

用法

基本

QItemSection

活动状态

QItemLabel

更复杂的示例

出于以下示例演示目的，我们使用了 active 属性而不是 QItem 的路由属性（to、exact）。UMD 没有 Vue 路由器，因此您无法在 Codepen/jsFiddle 中使用它。

连接到 Vue 路由器

您可以将 QItem 与 Vue 路由器一起使用，方法是将绑定到它的 <router-link> 属性。这些属性允许监听当前应用程序路由，并在单击/点击时触发路由。

<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 卡。