Vue でデータのページングと表示を実装する方法-Vue.js-php.cn

Vue でデータのページングと表示を実装する方法

PHPz

リリース： 2023-10-15 17:46:41

オリジナル

1591 人が閲覧しました

Vue でデータのページングと表示を実装する方法

Vue は、Web 開発で広く使用されている人気のフロントエンド JavaScript フレームワークです。データ駆動型およびコンポーネントベースの機能により、開発者はデータを処理し、インタラクティブなユーザーインターフェイスをより簡単に構築できるようになります。

実際の開発では、ページ内に大量のデータを表示する必要がある場面に遭遇することがよくあります。この記事では、Vue フレームワークを使用してデータのページングと表示を実装する方法を紹介し、具体的なコード例を示します。

1. 準備
まず、Vue フレームワークをプロジェクトにインポートする必要があります。 CDN を介して導入することも、npm を使用してインストールしてから、import ステートメントを介してインポートすることもできます。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue Pagination</title>
</head>
<body>
  <div id="app">
    <!-- 数据列表 -->
    <ul>
      <li v-for="item in currentPageData" :key="item.id">{{ item.name }}</li>
    </ul>
    <!-- 分页器 -->
    <div>
      <button @click="prevPage">上一页</button>
      <span>{{ currentPage }}</span>
      <button @click="nextPage">下一页</button>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    // 创建Vue实例
    new Vue({
      el: '#app',
      data: {
        currentPage: 1, // 当前页码
        pageSize: 10, // 每页显示的数据条数
        dataList: [], // 数据列表
      },
      computed: {
        // 计算属性，根据当前页码和每页显示的数据条数，计算当前页显示的数据
        currentPageData() {
          const start = (this.currentPage - 1) * this.pageSize;
          const end = start + this.pageSize;
          return this.dataList.slice(start, end);
        },
      },
      methods: {
        // 上一页
        prevPage() {
          if (this.currentPage > 1) {
            this.currentPage--;
          }
        },
        // 下一页
        nextPage() {
          if (this.currentPage < this.totalPages) {
            this.currentPage++;
          }
        },
      },
      created() {
        // ajax请求获取数据
        // 这里使用setTimeout模拟异步请求
        setTimeout(() => {
          this.dataList = [
            { id: 1, name: '数据1' },
            { id: 2, name: '数据2' },
            // ...
            { id: 100, name: '数据100' },
          ];
        }, 1000);
      },
    });
  </script>
</body>
</html>

ログイン後にコピー

上記のコードは、最も基本的なページング関数の例です。 Vue インスタンスでは、ページングロジックを制御するためのいくつかのデータとメソッドを定義します。

data 属性では、currentPage (現在のページ番号)、pageSize (各ページに表示されるデータの数)、dataList (データのリスト) の 3 つの変数が定義されています。
属性を計算することにより、currentPage と pageSize に基づいて currentPageData が計算されます。これは現在のページに表示されるデータです。
2 つのメソッド prevPage と nextPage を定義します。これらは、それぞれ前のページと次のページにジャンプするために使用されます。この 2 つの方法のうち、まず総ページ数を超えないように判断してください。
作成されたフック関数では、非同期リクエストがシミュレートされ、setTimeout タイマーによって 1 秒の遅延でデータが dataList に保存されます。
テンプレートでは、v-for 命令を使用して currentPageData 内のデータをループアウトし、v-bind 命令を使用してキー属性を関連付けます。
ページネータ部分は、ボタンとバインディングイベントを通じて「前のページ」と「次のページ」の機能を実装し、現在のページ番号を表示します。

上記のコードは基本的なページング表示のみを実装しています。実際のプロジェクトでは、指定したページへのジャンプや総ページ数の表示など、より複雑なロジックが必要になる場合があります。ただし、基本的な考え方は同じで、現在のページ番号と各ページに表示されるデータの数に基づいて、現在のページに表示されるデータが計算されます。

以上がVue でデータのページングと表示を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。