VUE3 基本チュートリアル: Vue.js フィルターを使用してテーブル データを処理する

Vue.js は、高パフォーマンスで保守可能な Web アプリケーションの構築に役立つ非常に人気のある JavaScript フレームワークです。 Vue.js では、フィルターはデータを操作するため、特に表形式のデータを操作する場合に非常に便利なツールです。この記事では、Vue.js フィルターを使用して表形式のデータを処理する方法を紹介します。

1. Vue.js フィルターの概要

フィルターは、入力データを必要な出力形式に変換できるデータ処理の方法です。 Vue.js では、フィルターは、データを変換する必要がある場合にテンプレートで使用できるグローバル関数または Vue インスタンス関数です。

Vue.js フィルターには、グローバル フィルターとローカル フィルターの 2 種類があります。グローバル フィルターはグローバルに使用できますが、ローカル フィルターは Vue インスタンス内でのみ使用できます。

2. Vue.js フィルターを使用してテーブル データを処理する

ユーザー名、電子メール アドレス、登録日などのユーザー データを含むテーブルがあるとします。登録日をフォーマットし、登録日でテーブルを並べ替えたいと考えています。

まず、Vue インスタンスでグローバル フィルター dateFilter を定義します。

Vue.filter('dateFilter', function(value) {
  if (!value) return ''
  return moment(value).format('YYYY/MM/DD')
})

上記のコードでは、moment.js ライブラリを使用して日付文字列を日付オブジェクトに変換し、形式 ( ) メソッドは、「YYYY/MM/DD」形式にフォーマットします。

次に、テーブルのテンプレートでフィルターを使用します。

<table>
  <thead>
    <tr>
      <th>用户名</th>
      <th>邮箱</th>
      <th @click="sortTable('registerDate')">注册日期</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="user in sortedUsers">
      <td>{{ user.name }}</td>
      <td>{{ user.email }}</td>
      <td>{{ user.registerDate | dateFilter }}</td>
    </tr>
  </tbody>
</table>

上記のコードでは、パイプ文字 '|' を使用して、ユーザーの registerDate フィールドを dateFilter フィルターに渡します。 Vue は自動的に dateFilter 関数を呼び出し、registerDate をパラメータとして渡します。

テンプレートでフィルターを使用する場合、フィルターの処理順序が結果に影響を与える可能性があることに注意してください。上記のコードでは、まず登録日 (sortedUsers) でテーブルを並べ替えてから、日付をフォーマットします。

次に、sortTable() メソッドを実装する必要があります。このメソッドは、クリックされたヘッダー タイトルに基づいてテーブルを並べ替えます。

sortTable(column) {
  if (this.sortColumn === column) {
    this.sortOrder = this.sortOrder * -1
  } else {
    this.sortColumn = column
    this.sortOrder = 1
  }
  this.users.sort((a, b) => {
    let x = a[column]
    let y = b[column]
    if (column === 'registerDate') {
      x = moment(x)
      y = moment(y)
    }
    if (x < y) {
      return -1 * this.sortOrder
    } else if (x > y) {
      return 1 * this.sortOrder
    } else {
      return 0
    }
  })
}

上記のコードでは、sort() メソッドを使用してテーブルを並べ替えます。列名が「registerDate」の場合、日付文字列を日付オブジェクトに変換し、日付オブジェクトで並べ替えます。

最後に、Vue インスタンスでユーザー データを定義し、created() 関数でユーザー データをロードする必要があります。

data: {
  users: [],
  sortColumn: '',
  sortOrder: 1
},
created() {
  axios.get('/api/users').then(response => {
    this.users = response.data
  })
}

上記のコードでは、Axios を使用してバックエンド サーバーからユーザー データをロードしています。

3. 概要

Vue.js フィルターは、さまざまな種類のデータの処理に役立つ非常に便利なツールです。この記事では、Vue.js フィルターを使用して表形式データを処理する方法について説明しました。日付文字列を指定された形式に変換するグローバル フィルターを定義し、このフィルターを使用してユーザーの登録日データを変換します。また、テーブルのソート機能の実装方法も紹介しました。この記事を読んで、Vue.js フィルターの基本的な使用法を理解できたと思います。今後の開発作業に役立つことを願っています。

以上がVUE3 基本チュートリアル: Vue.js フィルターを使用してテーブル データを処理するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。