VUE3 基本チュートリアル: データ フィルタリングのためのフィルタの使用

VUE3 は現在フロントエンド開発で人気のフレームワークであり、その基本機能によりフロントエンド開発の効率が大幅に向上します。中でもフィルターはVUE3では非常に便利なツールで、フィルターを使用することで簡単にデータの絞り込みや絞り込み、加工を行うことができます。

それでは、フィルターとは何でしょうか?簡単に言えば、フィルターは VUE3 のフィルターです。これらは、ページ内でより望ましい結果を表示するために、レンダリングされたデータを処理するために使用できます。フィルターはテンプレートで使用できる関数で、データといくつかのパラメーターを渡すことによって処理された結果を返します。実際、日常の開発における多くの操作はフィルターによって簡素化できます。

データのフィルタリングにフィルターを使用する方法を学びましょう。

まず、VUE3 インスタンスで filters 属性を定義する必要があります。この属性で複数の関数をフィルターとして定義できます。簡単な例を以下に示します. この例では、VUE3 のフィルター関数を使用して入力データを大文字に変換します:

<div id="app">
    <input type="text" v-model="input">
    <p>输出结果：{{input | uppercase}}</p>
</div>

<script src="https://unpkg.com/vue@next"></script>
<script>
    const app = Vue.createApp({
      data() {
        return {
          input: ''
        }
      },
      filters: {
        uppercase(val) {
          return val.toUpperCase();
        }
      }
    })

    app.mount('#app')
</script>

上記の例では、まず v-model を使用して入力データを変換します。ラベルのデータは、インスタンスで定義された入力属性にバインドされます。次に、ページ内でフィルターが大文字の名前で参照されます。最後に、大文字フィルター関数が VUE3 インスタンスで定義されています。この関数の主な機能は、文字を大文字に変換することです。

ここで、フィルターには複数の関数を定義できることに注意してください。同時に、フィルター名の後に縦棒を追加し、次のフィルター名を追加することで、同じタグ内で複数のフィルターを使用することもできます。 。

上記の例の文字列変換に加えて、フィルターは日付、通貨、数値などのデータ型の書式設定にも使用できます。たとえば、フィルター関数を使用してタイムスタンプを標準時刻形式に変換できます。コードは次のとおりです。

<p>输出结果：{{time | timestampToDate}}</p>

...

filters: {
    timestampToDate(val) {
      const date = new Date(Number(val));
      const year = date.getFullYear();
      const month = date.getMonth() + 1;
      const day = date.getDate();
      return `${year}-${month}-${day}`;
  }
}

価格の割引など、フィルターを使用して特別なロジックを実装することもできます。

<p>输出结果：{{price | discount(0.8)}}</p>

...

filters: {
    discount(val, discountRate) {
      return val * discountRate;
  }
}

上記のコードに示すように、フィルターの割引関数は前の例とは多少異なります。2 つのパラメーターを使用します。テンプレートで使用する場合は、2 番目の括弧内に割引率を入力します。実装効果から判断すると、渡されたパラメーターはフィルター関数の val の値を置き換えます。

要約すると、VUE3 フィルターを使用するとデータを簡単に処理できるため、ページ データの書式設定と論理処理を迅速に実装できます。実際の開発では、必要に応じて複数の異なるフィルター関数を定義して、より効率的かつ便利にデータ処理を完了できます。

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