列表和列表项
QList 和 QItem 是一组组件，它们可以一起工作，将多个行项目垂直显示为单个连续元素。它们最适合显示与信息行类似的数据类型，例如联系人列表、播放列表或菜单。每行称为一个项目。QItem 也可以在 QList 之外使用。
列表还可以封住，类似于列表项的组件，例如 QExpansionItem 或 QSlideItem。如果需要，还可以使用 QSeparator 组件来进行区域分割。
列表项具有以下预设子组件：
- QItemSection - 一个列表项部分可以针对特定内容有多种不同的用法，通过
avatar,thumbnail和side属性来控制。如果未使用上述属性，它将作为 QItem 的主要部分渲染（会占用最大的可用空间）。 - QItemLabel - 一个标签对于类似标题的内容很有用。
QList API
QItem API
QItemSection API
QItemLabel API
用法
基础
QItemSection
TIP
当您有多行项目时，可以使用 QItemSection 的 top 属性将各部分与顶部对齐，从而覆盖默认的中间对齐方式。
Active state
QItemLabel
WARNING
注意，您可以使用 lines 属性处理标签溢出，告诉它可以占用多少行。但是，此功能使用依赖于 Webkit 的 CSS，因此无法在 IE/老版本 Edge 中使用。
更多示例
在下面的示例中，出于演示目的，我们使用 active 属性代替 QItem 的 路由管理器属性（to, exact）。 UMD 没有 Vue Router，因此您将无法在 Codepen/jsFiddle 中使用它。
TIP
对于更复杂的菜单，请考虑同时使用 QExpansionItem。
连接到 Vue Router
您可以在 QItems 上使用 <router-link> 拥有的属性来将 QItems 与 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 卡。