Pagination 分页 #

<template #source>
  <div>
    <div>
      <a v-for="article of articles">
        <div>
          <div>
            <span>{{ article.title }}</span>
          </div>
          <div>
            <span>{{ article.content }}</span>
          </div>
        </div>
      </a>
    </div>
    <b-pagination
      v-model="pageIndex"
      :total="sourceArticles.length"
      :page-size="pageSize"
    ></b-pagination>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
const pageIndex = ref(1)
const pageSize = ref(1)
const articles = computed(() =>
  sourceArticles.value.slice(
    (pageIndex.value - 1) * pageSize.value,
    pageIndex.value * pageSize.value
  )
)
const sourceArticles = ref([
  {
    title: '我是标题1',
    content: '我是内容1'
  },
  {
    title: '我是标题2',
    content: '我是内容2'
  },
  {
    title: '我是标题3',
    content: '我是内容3'
  },
  {
    title: '我是标题4',
    content: '我是内容4'
  }
])
</script>