Quasar 走马灯：使用 v-for 按组分类，轻松构建动态列表

2024-03-16 01:03:56

用 Quasar 走马灯 v-for 按组分类

在构建动态 UI 时，灵活地管理项目至关重要。Quasar 走马灯提供了一个强大的解决方案，让你可以按组使用 v-for 遍历数组，从而创建动态列表。

准备数据

首先，你需要创建一个包含对象的数组，其中每个对象表示组中的一项。例如：

const posts = [
  { group: 'Group 1', items: ['Item 1', 'Item 2', 'Item 3'] },
  { group: 'Group 2', items: ['Item 4', 'Item 5', 'Item 6'] },
];

创建走马灯

接下来，使用 Quasar 的 q-carousel 组件创建走马灯。别忘了将 v-model 绑定到一个响应式值，该值表示当前活动组。

<q-carousel v-model="currentGroup">
  ...
</q-carousel>

创建组幻灯片

对于每个组，你都需要创建一个幻灯片。通过使用 v-for 遍历组数组，你可以动态创建这些幻灯片。

<q-carousel-slide v-for="group in posts" :key="group.group">
  ...
</q-carousel-slide>

填充幻灯片

在每个幻灯片中，使用嵌套 v-for 遍历组内的项目。这样就可以显示每个组中的所有项目。

<q-carousel-slide v-for="group in posts" :key="group.group">
  <div v-for="item in group.items" :key="item">
    ...
  </div>
</q-carousel-slide>

更新数据

更新列表非常简单，只需更新 posts 数组即可。走马灯会自动检测这些更改并重新渲染幻灯片。

示例代码

<template>
  <div>
    <q-carousel v-model="currentGroup">
      <q-carousel-slide v-for="group in posts" :key="group.group">
        <div v-for="item in group.items" :key="item">
          {{ item }}
        </div>
      </q-carousel-slide>
    </q-carousel>
  </div>
</template>

<script setup>
  const currentGroup = ref(0);
  const posts = [
    { group: 'Group 1', items: ['Item 1', 'Item 2', 'Item 3'] },
    { group: 'Group 2', items: ['Item 4', 'Item 5', 'Item 6'] },
  ];
</script>