Vueリストの見方-フロントエンドQ&A-php.cn

Vueリストの見方

王林

リリース： 2023-05-08 11:33:37

オリジナル

560 人が閲覧しました

Vue.js は、Web インターフェイスやシングルページアプリケーション (SPA) の構築に使用できる人気の JavaScript フレームワークで、非常に強力で柔軟性があります。 Vue では、リストはデータ表現の非常に一般的な形式です。この記事では、Vue リストの一般的なメソッドとテクニックをいくつか紹介します。

v-for ディレクティブを使用してリストを作成します

Vue には、配列またはオブジェクトをループしてリストを作成するための v-for ディレクティブが用意されています。 v-for を使用する場合、現在の反復の項目、現在の反復の項目のインデックス、または現在の反復のキー (オブジェクトの場合) を使用できます。

たとえば、複数の映画を含む配列 movie があるとします。 v-for を使用して配列をループし、ページ上の各ムービーの li タグを作成できます。

<ul>
  <li v-for="movie in movies" :key="movie.id">{{ movie.title }}</li>
</ul>

ログイン後にコピー

この例では、v-for ディレクティブを使用してムービー配列を反復処理し、各ムービー movie の li タグは li タグを作成します。また、各 li タグに key 属性を指定します。これは、リストを再レンダリングするときに Vue がパフォーマンスを最適化するのに役立ちます。

計算プロパティを使用してリストをフィルターまたは並べ替える

リストのデータの一部をフィルターまたは並べ替える必要がある場合があります。Vue はこれを実現するための計算プロパティを提供します。目的。計算プロパティは、戻り値を動的に計算できるプロパティであり、依存するプロパティが変更されると、再計算されて新しい値が返されます。

たとえば、すべての映画を含む movie 配列と、「アクション」として分類された映画を含む filteredMovies 配列があるとします。計算プロパティを使用して、「アクション」として分類されるすべてのムービーをフィルターで除外できます。

data() {
  return {
    movies: [...],
    genre: 'Action',
  }
},
computed: {
  filteredMovies() {
    return this.movies.filter(movie => movie.genre === this.genre)
  }
}

ログイン後にコピー

この例では、計算プロパティで filteredMovies という計算プロパティを定義します。 Array.filter() メソッドを使用して、現在選択されているジャンルと同じジャンルの映画をフィルターで除外します。

同様に、計算されたプロパティを使用してリストを並べ替えることができます。たとえば、評価に基づいて映画を昇順または降順に並べ替えることができます。

data() {
  return {
    movies: [...],
    sortBy: 'rating',
    sortDirection: 'asc',
  }
},
computed: {
  sortedMovies() {
    return this.movies.sort((a, b) => {
      const sortOrder = this.sortDirection === 'asc' ? 1 : -1
      if (a[this.sortBy] < b[this.sortBy]) {
        return -1 * sortOrder
      }
      if (a[this.sortBy] > b[this.sortBy]) {
        return 1 * sortOrder
      }
      return 0
    })
  }
}

ログイン後にコピー

この例では、計算プロパティでsortedMovies 計算プロパティを定義します。 Array.sort() メソッドを使用して、評価属性に基づいて映画を並べ替えます。 sortDirection プロパティに応じて、並べ替え方向は「asc」(昇順) または「desc」(降順) になります。

オブジェクトプロパティでのリストの使用

場合によっては、リストが単なる配列ではなく、ネストされたオブジェクトのコレクションである場合があります。これらのオブジェクトは、異なるプロパティとプロパティ値を持つ場合があります。

映画を含むオブジェクト movie があり、各映画に title 属性と、映画の分類を含むジャンル配列があるとします。次のように v-for ディレクティブを使用してオブジェクトプロパティを走査できます:

<template>
  <div v-for="(movie, key) in movies" :key="key">
    <h2>{{ movie.title }}</h2>
    <ul>
      <li v-for="genre in movie.genres" :key="genre">{{ genre }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      movies: {
        1: {
          title: 'The Dark Knight',
          genres: ['Action', 'Crime', 'Drama'],
        },
        2: {
          title: 'Pulp Fiction',
          genres: ['Crime', 'Drama'],
        },
      },
    }
  },
}
</script>

ログイン後にコピー

この例では、v-for ディレクティブを使用してオブジェクトプロパティを走査します。ムービー変数とキー変数を使用して、現在反復されているオブジェクトとこのオブジェクトのキーを表します。次に、v-for ディレクティブを使用して各映画のカテゴリを反復処理し、li タグを作成します。

概要

この記事では、Vue リストの一般的な方法とテクニックをいくつか紹介しました。 v-for 命令を使用して配列またはオブジェクトをループし、リストを作成する方法を学びました。また、計算されたプロパティを使用してリストをフィルタリングおよび並べ替える方法も学びました。最後に、オブジェクトのプロパティを含むリストを操作する方法を説明しました。

Vue は非常に強力で柔軟なフレームワークです。この記事が役に立ち、Vue をより効果的に使用してリストを作成できるようになることを願っています。

以上がVueリストの見方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。