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

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

王林

リリース： 2023-06-15 23:34:57

オリジナル

2179 人が閲覧しました

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 サイトの他の関連記事を参照してください。