vue卡片分页查询代码示例

以下是一个简单的Vue卡片分页查询的代码示例：

<template>
  <div>
    <div class="card" v-for="card in paginatedCards" :key="card.id">
      <!-- 卡片内容 -->
      <h3>{{ card.title }}</h3>
      <p>{{ card.description }}</p>
    </div>

    <pagination :total="totalCards" :per-page="perPage" @page-changed="handlePageChange" />
  </div>
</template>

<script>
import Pagination from './Pagination.vue'; // 导入分页组件

export default {
  components: {
    Pagination
  },
  data() {
    return {
      cards: [], // 所有的卡片数据
      currentPage: 1, // 当前页码
      perPage: 10, // 每页展示数量
    };
  },
  computed: {
    totalCards() {
      return this.cards.length; // 总的卡片数量
    },
    paginatedCards() {
      const start = (this.currentPage - 1) * this.perPage;
      const end = start + this.perPage;
      return this.cards.slice(start, end); // 根据当前页码和每页展示数量筛选出对应的卡片数据
    },
  },
  methods: {
    handlePageChange(page) {
      this.currentPage = page; // 当页码变化时更新当前页码
    },
  },
};
</script>

在上述代码中，通过使用一个分页组件`pagination`来控制页面上展示的卡片数量和当前页码。分页组件会根据传入的`total`（总卡片数量）和`per-page`（每页展示数量）来计算总页数和展示的卡片数据。在父组件中，使用`v-for`指令遍历`paginatedCards`数组，渲染卡片组件，并将总卡片数量和每页展示数量作为props传递给分页组件。当分页组件中的页码发生变化时，会触发`handlePageChange`方法来更新当前页码。