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

¥The QList and QItem are a group of components which can work together to present multiple line items vertically as a single continuous element. They are best suited for displaying similar data types as rows of information, such as a contact list, a playlist or menu. Each row is called an Item. QItem can also be used outside of a QList too.

列表可以封装项或类似项的组件，例如 QExpansionItem 或 QSlideItem。此外，QSeparator 还可用于根据需要拆分部分。

¥Lists can encapsulate Items or Item-like components, for example QExpansionItem or QSlideItem. Also QSeparator can be used to split up sections, where needed.

列表项包含以下预置子组件：

¥List Items have the following pre-built child components:

• QItemSection - 项目部分可以有多种用途，用于特定内容。它们通过 avatar、thumbnail 和 side 属性进行控制。不使用 props，它将渲染 QItem 的主要部分（会覆盖所有可用空间）。

  ¥QItemSection - An item section can have several uses for particular content. They are controlled via the avatar, thumbnail and side props. With no props, it will render the main section of your QItem (which spans to the fullest of available space).

• QItemLabel - 项目标签对于 QItemSection 中的预定义文本内容类型或 QList 本身的标题式内容很有用。

  ¥QItemLabel - An item label is useful for predefined text content type within a QItemSection, or for header-like content of the QList itself.

用法(Usage)

¥Usage

基本(Basic)

¥Basic

QItemSection(QItemSection)

活动状态(Active state)

¥Active state

QItemLabel(QItemLabel)

更多复杂示例(More involved examples)

¥More involved examples

为了在下面的示例中进行演示，我们使用 active 属性而不是 QItem 的路由属性（to、exact）。UMD 没有 Vue Router，因此你无法在 Codepen/jsFiddle 中使用它。

¥For demoing purposes in the example below, we’re using the active prop instead of QItem’s router props (to, exact). UMD doesn’t have Vue Router so you wouldn’t be able to play with it in Codepen/jsFiddle.

连接到 Vue Router(Connecting to Vue Router)

¥Connecting to Vue Router

你可以通过绑定到 QItem 的 <router-link> 属性将 QItem 与 Vue Router 一起使用。这些允许监听当前应用的路由，并在点击/轻触时触发路由。

¥You can use QItems together with Vue Router through <router-link> properties bound to it. These allow for listening to the current app route and also triggering a route when clicked/tapped.

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

¥You can also delay, cancel or redirect navigation, as seen below. For a more in-depth description of the @click event being used below, please refer to QItem API card at the top of the page.