Vue实现分页功能的代码

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

<template>
  <div>
    <ul>
      <li v-for="page in pages" :key="page" :class="{ active: currentPage === page }">
        <a @click="currentPage = page">{{ page }}</a>
      </li>
    </ul>
    <p>
      当前页： {{ currentPage }}
    </p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      total: 100,
    };
  },
  computed: {
    pages() {
      const pageCount = Math.ceil(this.total / this.pageSize);
      const pages = [];
      for (let i = 1; i <= pageCount; i++) {
        pages.push(i);
      }
      return pages;
    },
  },
};
</script>

<style>
ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
}

li {
  margin-right: 5px;
}

li.active a {
  color: red;
}
</style>

在这个示例中，我们首先定义了三个数据变量：`currentPage` 表示当前页码，`pageSize` 表示每页的数据条数，`total` 表示数据总条数。

然后，我们通过计算属性 `pages` 来计算出总页数并生成页码数组。在模板中使用 `v-for` 指令渲染出页码列表，并使用 `v-bind` 动态绑定样式类，以便在当前页码高亮显示。

最后，我们在模板中加入一个文本框和按钮，用于跳转到指定页码。当用户点击页码时，我们使用 `@click` 事件绑定来更新 `currentPage` 的值，从而实现分页功能。