Vue テクノロジー開発でデータをフィルターおよび並べ替える方法

Vue テクノロジ開発でデータをフィルタリングおよび並べ替える方法

Vue テクノロジ開発では、データのフィルタリングと並べ替えは非常に一般的で重要な機能です。データのフィルタリングと並べ替えを通じて、必要な情報を迅速にクエリして表示できるため、ユーザー エクスペリエンスが向上します。この記事では、Vue でデータをフィルターおよび並べ替える方法を紹介し、読者がこれらの関数をよりよく理解して使用できるように具体的なコード例を示します。

1. データ フィルタリング

データ フィルタリングとは、特定の条件に基づいて要件を満たすデータをフィルタリングすることを指します。 Vue では、計算された属性またはフィルターを通じてデータをフィルターできます。

1. 計算属性フィルタリング

計算属性は Vue の特別な属性であり、依存データに基づいて新しい値を動的に計算できます。計算された属性と配列のフィルター メソッドを組み合わせて、データ フィルター処理を実装できます。

学生の名前と成績情報を含む学生リストのデータがあるとします。スコアが 80 を超える学生を除外する必要があります。以下はサンプル コードです。

<template>
  <div>
    <h1 id="学生列表">学生列表</h1>
    <ul>
      <li v-for="student in filteredStudents" :key="student.id">
        {{ student.name }} - {{ student.score }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      students: [
        { id: 1, name: '张三', score: 78 },
        { id: 2, name: '李四', score: 89 },
        { id: 3, name: '王五', score: 67 },
        { id: 4, name: '赵六', score: 92 }
      ]
    };
  },
  computed: {
    filteredStudents() {
      return this.students.filter(student => student.score > 80);
    }
  }
};
</script>

上記のコードでは、計算属性 filteredStudents を通じて、スコアが 80 を超える学生のリストを動的に計算し、ページに表示します。

2. フィルター フィルター処理

フィルターは Vue のもう 1 つの機能で、データのフォーマットに使用できます。フィルターと配列フィルター メソッドを組み合わせてデータをフィルターできます。

引き続き学生リストを例として、名前が「Zhang」で始まる学生を除外する必要があります。以下はサンプル コードです:

<template>
  <div>
    <h1 id="学生列表">学生列表</h1>
    <ul>
      <li v-for="student in students" :key="student.id" v-show="student.name | filterName">
        {{ student.name }} - {{ student.score }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      students: [
        { id: 1, name: '张三', score: 78 },
        { id: 2, name: '李四', score: 89 },
        { id: 3, name: '王五', score: 67 },
        { id: 4, name: '赵六', score: 92 }
      ]
    };
  },
  filters: {
    filterName: function(value) {
      return value.startsWith('张');
    }
  }
};
</script>

上記のコードでは、学生の名前が「Zhang」で始まるかどうかを判断するために、filterName という名前のフィルターを定義します。 v-show コマンドを使用して、資格のある学生をページに表示します。

2. データの並べ替え

データの並べ替えとは、指定されたルールに従ってデータを並べ替えることを指します。 Vue では、配列の sort メソッドを使用してデータを並べ替えることができます。

引き続き学生リストを例に挙げて、学生の成績に応じて学生リストを上位から下位に並べ替える必要があります。サンプルコードは以下のとおりです:

<template>
  <div>
    <h1 id="学生列表">学生列表</h1>
    <button @click="sortStudents">按成绩排序</button>
    <ul>
      <li v-for="student in students" :key="student.id">
        {{ student.name }} - {{ student.score }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      students: [
        { id: 1, name: '张三', score: 78 },
        { id: 2, name: '李四', score: 89 },
        { id: 3, name: '王五', score: 67 },
        { id: 4, name: '赵六', score: 92 }
      ]
    };
  },
  methods: {
    sortStudents() {
      this.students.sort((a, b) => b.score - a.score);
    }
  }
};
</script>

上記のコードでは、データに成績順に並べ替えるボタンを追加しており、このボタンをクリックすると、生徒リストを成績順に上位から下位に並べ替えることができます。

概要

Vue テクノロジ開発では、データのフィルタリングと並べ替えは非常に一般的で重要な機能です。計算された属性とフィルターを使用すると、データを簡単にフィルターでき、sort メソッドを使用すると、データを簡単に並べ替えることができます。この記事のコード例が、読者がこれらの機能をよりよく理解し、適用できるようになれば幸いです。

以上がVue テクノロジー開発でデータをフィルターおよび並べ替える方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。