在 Vue.js 中，你可以使用 vue-pagination 插件來(lái)實(shí)現(xiàn)商品列表的分頁(yè)功能。以下是一個(gè)簡(jiǎn)單的示例：

確保你已經(jīng)安裝了 vue-pagination 插件：

npm install vue-pagination --save

然后，在你的 Vue 項(xiàng)目中引入并使用它：

import Vue from 'vue'
import VuePagination from 'vue-pagination'

Vue.use(VuePagination)

export default {
  components: {
    'vue-pagination': VuePagination
  }
}

接下來(lái)，你可以在你的組件中使用 vue-pagination 插件來(lái)創(chuàng)建分頁(yè)組件：

<template>
  <div>
    <div>
      <h1>商品列表</h1>
      <table>
        <thead>
          <tr>
            <th v-for="page in pagination.pages" :key="page">頁(yè)碼</th>
            <th v-for="product in pagination.totalPages" :key="product">總頁(yè)數(shù)</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="page in pagination.current" :key="page">
            <td>{{ page }}</td>
            <td>{{ pagination.totalPages - page + 1 }}</td>
          </tr>
          <tr v-for="product in products" :key="product">
            <td>{{ product.id }}</td>
            <td>{{ product.name }}</td>
          </tr>
        </tbody>
      </table>
    </div>
    <vue-pagination :current-page="currentPage" :total-pages="totalPages" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPage: 1,
      totalPages: 5,
      products: [
        { id: 1, name: '產(chǎn)品1' },
        { id: 2, name: '產(chǎn)品2' },
        { id: 3, name: '產(chǎn)品3' },
        { id: 4, name: '產(chǎn)品4' },
        { id: 5, name: '產(chǎn)品5' },
        // ...更多產(chǎn)品數(shù)據(jù)...
      ],
    };
  },
  computed: {
    totalPages() {
      return Math.ceil(this.products.length / this.totalPages);
    },
  },
};
</script>

在這個(gè)示例中，我們使用了 vue-pagination 插件來(lái)創(chuàng)建一個(gè)分頁(yè)組件，并將其添加到頁(yè)面中。vue-pagination 插件會(huì)自動(dòng)計(jì)算當(dāng)前頁(yè)碼、總頁(yè)數(shù)以及分頁(yè)項(xiàng)，并將它們顯示在頁(yè)面上。