//点击当前页的时候 currentPage(val){ alert("当前页码："+val) // var url = ` http://192.168.24.32:8080/javaWebMaven_war_exploded/maven_demo_web_war_exploded/getAllStudents.action?currentPage=${val}&everyPageRow=${pageSize}`; //Axios.get(url).then(response=>{ //给集合tableData赋值 //给总条数赋值 //给每页展示条数赋值 // }) }, nextPage(val){ alert("你点击了下一页："+val) }前端点击页码按钮数据跟着变的代码怎么写

你可以在Vue组件中使用`watch`来监听当前页码的变化，当页码变化时，你可以执行一些操作来更新数据。以下是一个简单的示例代码：

<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>
import axios from 'axios';

export default {
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      totalRows: null,
      tableData: [],
    };
  },
  computed: {
    paginatedData() {
      const startIndex = (this.currentPage - 1) * this.pageSize;
      const endIndex = startIndex + this.pageSize;
      return this.tableData.slice(startIndex, endIndex);
    },
    totalPages() {
      return Math.ceil(this.totalRows / this.pageSize);
    },
  },
  watch: {
    currentPage(newVal) {
      const url = `http://192.168.24.32:8080/javaWebMaven_war_exploded/maven_demo_web_war_exploded/getAllStudents.action?currentPage=${newVal}&everyPageRow=${this.pageSize}`;
      axios.get(url).then(response => {
        this.tableData = response.data.tableData;
        this.totalRows = response.data.totalRows;
      });
    },
  },
  methods: {
    changePage(page) {
      this.currentPage = page;
    },
  },
};
</script>

在上面的代码中，我们使用了`watch`来监听当前页码的变化。当页码变化时，我们使用Axios发送一个请求到后端获取数据，并更新`tableData`和`totalRows`的值。这样，当页码变化时，`computed`属性会重新计算当前页码所对应的数据，并渲染到页面上。最终，我们使用v-for指令将计算出的数据渲染到页面上。