vue实现简易分页器

可以通过Vue来实现一个简易的分页器，下面是一个示例：

<template>
  <div>
    <div v-for="page in pages" :key="page" @click="gotoPage(page)">
      {{ page }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      total: 20, // 总页数
      pageSize: 5, // 每页显示的条数
      currentPage: 1, // 当前页码
    };
  },
  computed: {
    pages() {
      const pageCount = Math.ceil(this.total / this.pageSize);
      const pages = [];
      for (let i = 1; i <= pageCount; i++) {
        pages.push(i);
      }
      return pages;
    },
  },
  methods: {
    gotoPage(page) {
      this.currentPage = page;
      // 在这里触发加载数据的方法，传入当前页码和每页显示的条数
    },
  },
};
</script>

这个示例中，我们使用了一个`pages`计算属性来生成所有的页码。在模板中，我们使用`v-for`指令来循环渲染所有的页码，并且给每个页码添加了一个点击事件，当点击时会调用`gotoPage`方法跳转到对应的页码。

当用户单击第2页时，会触发`gotoPage`方法，将`currentPage`更新为2，然后再次渲染模板，此时第2页的页码会被高亮显示。同时，我们也可以在`gotoPage`方法中触发加载数据的方法，并将当前页码和每页显示的条数传入，以便从后端加载对应页码的数据。