avue 实现分页，点击分页，页面发生变化 例子

以下是一个简单的例子，使用Vue.js实现分页功能：

HTML代码：

<div id="app">
  <ul>
    <li v-for="page in pageCount" :key="page" :class="{active: currentPage === page}" @click="currentPage = page">{{ page }}</li>
  </ul>
  <p>{{ currentPage }}</p>
</div>

Vue.js代码：

new Vue({
  el: '#app',
  data: {
    items: [
      'Item 1',
      'Item 2',
      'Item 3',
      'Item 4',
      'Item 5',
      'Item 6',
      'Item 7',
      'Item 8',
      'Item 9',
      'Item 10'
    ],
    currentPage: 1,
    pageSize: 3
  },
  computed: {
    pageCount() {
      let itemCount = this.items.length;
      let pageCount = Math.ceil(itemCount / this.pageSize);
      return pageCount;
    },
    paginatedItems() {
      let startIndex = (this.currentPage - 1) * this.pageSize;
      let endIndex = startIndex + this.pageSize;
      return this.items.slice(startIndex, endIndex);
    }
  }
});

在这个例子中，我们首先定义了一个items数组，其中包含我们要分页的项目。我们还定义了一个currentPage和pageSize变量，用于跟踪当前页码和每页显示的项目数。在computed属性中，我们使用itemCount和pageSize计算出总页数pageCount，并使用currentPage和pageSize计算出当前页的项目列表paginatedItems。在HTML中，我们使用v-for循环遍历页码，并在每个li元素上绑定一个点击事件，以便在点击页码时更新currentPage变量。我们还显示当前页码的值。

当我们运行这个例子时，我们将看到一个简单的分页器，其中每个页码都可以单击。当我们单击页码时，我们将看到当前页码的值更新，并且paginatedItems列表中显示的项目将相应地更改。