vue前端点击页码按钮数据跟着变的代码怎么写

你可以在Vue组件中使用computed属性来实时计算当前页显示的数据。当页码按钮被点击时，可以通过v-on指令绑定一个方法，该方法将页码作为参数传递到Vue实例中。在Vue实例中，你可以更新当前页码的值，从而触发computed属性的重新计算。以下是一个简单的示例代码：

<template>
  <div>
    <ul>
      <li v-for="item in paginatedData">{{ item }}</li>
    </ul>
    <div>
      <button v-for="page in totalPages" @click="changePage(page)">{{ page }}</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15],
    };
  },
  computed: {
    paginatedData() {
      const startIndex = (this.currentPage - 1) * this.pageSize;
      const endIndex = startIndex + this.pageSize;
      return this.data.slice(startIndex, endIndex);
    },
    totalPages() {
      return Math.ceil(this.data.length / this.pageSize);
    },
  },
  methods: {
    changePage(page) {
      this.currentPage = page;
    },
  },
};
</script>

在上面的代码中，我们使用了两个computed属性：`paginatedData`和`totalPages`。`paginatedData`根据当前页码和每页显示的数量计算当前页码所对应的数据，`totalPages`计算总页数。当页码按钮被点击时，我们调用了`changePage`方法，该方法将页码作为参数传递到Vue实例中，从而更新当前页码的值，触发computed属性的重新计算。最终，我们使用v-for指令将计算出的数据渲染到页面上。