分页链接在vue中显示为点

<template>
  <div>
    <ul>
      <li v-for="page in displayedPages" :key="page">
        <a v-if="page === '...'">{{ page }}</a>
        <a v-else :href="getPageLink(page)">{{ page }}</a>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPage: 1,
      totalPages: 10,
      maxDisplayedPages: 5
    };
  },
  computed: {
    displayedPages() {
      const pages = [];
      let startPage = Math.max(1, this.currentPage - Math.floor(this.maxDisplayedPages / 2));
      let endPage = Math.min(this.totalPages, startPage + this.maxDisplayedPages - 1);

      if (endPage - startPage < this.maxDisplayedPages - 1) {
        startPage = Math.max(1, endPage - this.maxDisplayedPages + 1);
      }

      for (let i = startPage; i <= endPage; i++) {
        pages.push(i);
      }

      if (startPage > 1) {
        pages.unshift('...');
      }
      if (endPage < this.totalPages) {
        pages.push('...');
      }

      return pages;
    }
  },
  methods: {
    getPageLink(page) {
      // 返回分页链接的地址
    }
  }
};
</script>