vue pagination 分页前端使用模板

Vue.js 是一个流行的 JavaScript 框架，它可以用于构建现代化的 Web 应用程序，包括分页应用程序。以下是一个基本的 Vue.js 分页组件模板：

<template>
  <div class="pagination">
    <a v-if="currentPage > 1" @click="changePage(currentPage - 1)">&laquo; Previous</a>
    <a v-for="page in pages" :key="page" :class="{ active: page === currentPage }" @click="changePage(page)">{{ page }}</a>
    <a v-if="currentPage < totalPages" @click="changePage(currentPage + 1)">Next &raquo;</a>
  </div>
</template>

<script>
export default {
  props: {
    totalItems: {
      type: Number,
      required: true
    },
    itemsPerPage: {
      type: Number,
      default: 10
    },
    currentPage: {
      type: Number,
      default: 1
    }
  },
  computed: {
    totalPages() {
      return Math.ceil(this.totalItems / this.itemsPerPage);
    },
    pages() {
      const pages = [];
      for (let i = 1; i <= this.totalPages; i++) {
        pages.push(i);
      }
      return pages;
    }
  },
  methods: {
    changePage(page) {
      this.$emit('page-changed', page);
    }
  }
};
</script>

这个模板是一个 Vue.js 单文件组件，它接受三个属性：`totalItems` 表示总项数，`itemsPerPage` 表示每页显示的项数，`currentPage` 表示当前页码。组件通过计算属性 `totalPages` 计算总页数，然后生成页码数组 `pages`，并使用 `v-for` 渲染到页面上。用户可以通过点击页码按钮来改变当前页码，并通过 `$emit` 事件向父组件发送页面更改的事件。

你可以根据实际需要进行修改和优化，例如添加 CSS 样式、更改页面布局等。