vue 翻页的时候如何让元素重新渲染

在Vue中，当我们使用翻页功能时，可以通过修改数据来触发元素的重新渲染。

首先，我们需要在Vue组件中定义一个数据属性，用于表示当前的页码，例如：

data() {
  return {
    currentPage: 1 // 当前页码，默认为第一页
  }
}

接下来，在模板中使用这个数据属性来控制需要重新渲染的元素。例如，我们有一个列表，则可以使用`v-for`指令来迭代渲染每个列表项：

<ul>
  <li v-for="item in paginatedItems" :key="item.id">{{ item.name }}</li>
</ul>

其中，`paginatedItems`是一个计算属性，用于根据当前页码获取对应的列表数据：

computed: {
  paginatedItems() {
    // 根据当前页码和每页显示数量来计算起始和结束索引
    const startIndex = (this.currentPage - 1) * this.pageSize;
    const endIndex = startIndex + this.pageSize;
    // 返回对应的列表数据
    return this.items.slice(startIndex, endIndex);
  }
}

当我们点击翻页按钮时，可以通过修改`currentPage`的值来切换页码，从而触发数据的变化，进而触发元素的重新渲染：

<button @click="prevPage">上一页</button>
<button @click="nextPage">下一页</button>

methods: {
  prevPage() {
    if (this.currentPage > 1) {
      this.currentPage--;
    }
  },
  nextPage() {
    if (this.currentPage < this.totalPages) {
      this.currentPage++;
    }
  }
}

上述代码中，`prevPage`方法用于减少`currentPage`的值，`nextPage`方法用于增加`currentPage`的值，同时进行一些边界判断，确保页码在合理范围内。

这样，当我们点击翻页按钮时，`currentPage`的变化会自动触发计算属性`paginatedItems`的重新计算，进而触发对应元素的重新渲染。