vue3用ref写一个有分页和样式的代码

好的，下面是一个简单的vue3代码示例，使用ref实现分页和样式：

<template>
  <div class="container">
    <div v-for="item in pagedData" :key="item.id" class="item">
      {{ item }}
    </div>
    <div class="pagination">
      <button :disabled="currentPage === 1" @click="currentPage--">上一页</button>
      <div class="current-page">第{{ currentPage }}页</div>
      <button :disabled="currentPage === pageCount" @click="currentPage++">下一页</button>
    </div>
  </div>
</template>

<script>
import { ref, computed } from 'vue'

export default {
  setup() {
    const data = ref([
      'item 1',
      'item 2',
      'item 3',
      'item 4',
      'item 5',
      'item 6',
      'item 7',
      'item 8',
      'item 9',
      'item 10',
      'item 11',
      'item 12',
      'item 13',
      'item 14',
      'item 15',
      'item 16',
      'item 17',
      'item 18',
      'item 19',
      'item 20',
      'item 21',
      'item 22',
      'item 23',
      'item 24',
      'item 25',
      'item 26',
      'item 27',
      'item 28',
      'item 29',
      'item 30'
    ])

    const itemsPerPage = 5
    const currentPage = ref(1)
    const pageCount = computed(() => Math.ceil(data.value.length / itemsPerPage))

    const pagedData = computed(() => {
      const startIndex = (currentPage.value - 1) * itemsPerPage
      const endIndex = currentPage.value * itemsPerPage
      return data.value.slice(startIndex, endIndex)
    })

    return {
      pagedData,
      currentPage,
      pageCount
    }
  }
}
</script>

<style>
.container {
  max-width: 320px;
  margin: 0 auto;
}

.item {
  border: 1px solid #ccc;
  padding: 8px;
  margin-bottom: 8px;
}

.pagination {
  display: flex;
  justify-content: space-between;
  margin-top: 16px;
}
</style>

这段代码演示了如何使用ref来实现分页和样式。其中，数据存储在一个ref变量中，并且每页显示5条记录。使用computed属性来计算总页数和当前页的数据。最后，使用v-for指令和class样式来显示数据，并使用disabled属性来禁用上一页和下一页按钮。