vue中实现简单的分页

这篇是对之前参考的博客进行一个改进，因为我发现在我这里使用有些顺序是不可行的
参考博客
然后写这篇博客也是给自己以后作参考：

<!--  -->
<template>
  <div class="careMePage">
    <table>
      <thead>
        <tr>
          <th>姓名</th>
          <th>年龄</th>
          <th>性别</th>
          <th>电话号码</th>
          <th>状态</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item,index) in currentPageData" :key="index">
          <td>{{item.name}}</td>
          <td>{{item.age}}</td>
          <td>{{item.sex}}</td>
          <td>{{item.phone}}</td>
          <td>
            <img src="../../assets/danger.png" v-if="item.state == '无效'" />
            <img src="../../assets/success.png" alt style="color:green" v-else />
          </td>
          <!-- <img src="../../assets/dengpao.png" alt="" style="backColor:red"> -->
        </tr>
      </tbody>
    </table>
    <div class="myBtn">
      <button @click="lastPage">上一页</button>
      <button @click="nextPage">下一页</button>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      users: null,
      totalPage: 1, // 统共页数，默认为1
      currentPage: 1, //当前页数 ，默认为1
      pageSize: 4, // 每页显示数量
      currentPageData: [] //当前页显示内容
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  created() {},
  mounted() {
    this.getData();
  },
  methods: {
    lastPage() {
    
      if (this.currentPage == 1) {
        alert('已是第一页')
        return false;
      } else {
        this.currentPage--;
       this.getData();
      }
    },
    nextPage() {
      if (this.currentPage == this.totalPage) {
         alert('已是最后一页')
        return false;
       
      } else {
        this.currentPage++;
        this.getData();
      }
    },
    getData() {
      this.$axios
        .get(
          "https://easy-mock.com/mock/5db16a65a56d2e0d1f46954b/example/userData"
        )
        .then(res => {
          this.users = res.data.users;
          this.totalPage = Math.ceil(this.users.length / this.pageSize);
          this.totalPage = this.totalPage == 0 ? 1 : this.totalPage;
          // console.log(this.totalPage);
          let begin = (this.currentPage - 1) * this.pageSize;
          let end = this.currentPage * this.pageSize;
          this.currentPageData = this.users.slice(begin, end);
          console.log( this.currentPageData)
        })
        .catch(err => {});
    }
  }
};
</script>
<style lang='less' scoped>
//@import url(); 引入公共css类
@import "./careMe.less";
</style>

我是使用的easy mock 地址也放送了 但是easy mock不是特别稳定有时候是不会出数据的。
我和参考博文有一定的不同就是他把

this.totalPage = Math.ceil(this.users.length / this.pageSize);
          this.totalPage = this.totalPage == 0 ? 1 : this.totalPage;
          // console.log(this.totalPage);
          let begin = (this.currentPage - 1) * this.pageSize;
          let end = this.currentPage * this.pageSize;
          this.currentPageData = this.users.slice(begin, end);

写进了一个方法在mounted，但是你会发现在这些方法里是获取不到this.users的（axios的数据都放在这里面），于是我就想把这个放在axios里面了，就可以了，不确定是不是我这个接口的问题，但是这样分页确实成功了。