vue实现分页组件：简单、高效

使用vue实现分页组件有许多好处：

• 代码复用： 您可以将分页组件用在多个页面中，而无需重复编写代码。
• 提高开发效率： 使用分页组件可以使您的开发工作更加高效，因为您只需编写一次代码，即可在多个页面中使用。
• 易于维护： 分页组件可以使您的代码更加易于维护，因为您只需在一个地方更新代码，即可影响到所有使用该组件的页面。

以下是在vue中实现分页组件的步骤：

1. 创建分页组件

<template>
  <div>
    <ul class="pagination">
      <li v-for="page in pages" :key="page">
        <a :href="'#/page/' + page" :class="{ active: currentPage === page }">{{ page }}</a>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    currentPage: {
      type: Number,
      default: 1
    },
    totalPages: {
      type: Number,
      required: true
    }
  },

  computed: {
    pages() {
      let pages = [];
      for (let i = 1; i <= this.totalPages; i++) {
        pages.push(i);
      }
      return pages;
    }
  }
};
</script>

2. 在页面中使用分页组件

<template>
  <div>
    <h1>Page {{ currentPage }}</h1>
    <pagination :current-page="currentPage" :total-pages="totalPages"></pagination>
  </div>
</template>

<script>
import Pagination from './Pagination.vue';

export default {
  components: {
    Pagination
  },

  data() {
    return {
      currentPage: 1,
      totalPages: 10
    };
  }
};
</script>

3. 样式

.pagination {
  display: flex;
  justify-content: center;
}

.pagination li {
  margin: 0 5px;
}

.pagination a {
  display: block;
  padding: 5px 10px;
  text-decoration: none;
}

.pagination .active {
  background-color: #007bff;
  color: #fff;
}

使用上述代码，您就可以在vue中轻松地实现分页组件了。