Vueフィルターの使い方

Vueフィルターの使い方

概要

vue2.0 より前は、組み込みフィルターがありました。2.0 では組み込みフィルターはありませんが、フィルターをカスタマイズできます。

Vue フィルターに関しては、公式ドキュメントに次のように記載されています。

Vue.js を使用すると、一般的なテキストの書式設定に使用できる独自のフィルターを定義できます。フィルターは、二重中括弧補間と v-bind 式の 2 つの場所で使用できます (後者は 2.1.0 以降でサポートされています)。フィルターは、JavaScript 式の最後に「パイプ」記号で示されて追加する必要があります。

つまり、フィルターはデータをフォーマットするために使用される関数です。フィルターは元のデータを変更しません。フィルターの機能は、データをフィルター処理すること、つまり、データ形式や状態変換などを変更して、データを処理して処理済みのデータを返すことです。

フィルターには2種類あります

  • コンポーネント内のフィルター (コンポーネント内で有効)
  • グローバル フィルター (すべてのコンポーネントで共有)

フィルターの定義

最初のパラメータはフィルターの名前です。

2 番目のパラメーターはフィルターの機能です (vue が定義されていない場合、この文字列が何であるか、何をするかはわかりません)。

フィルター機能

  • 宣言関数 (データ、argv1、argv2...) {}
  • 最初のパラメータはフィルタリングするデータ、つまり呼び出し時のパイプ文字の左側の内容です。
  • 2 番目以降のパラメータは、フィルターを呼び出すときに渡されるパラメータです。

フィルターの使用

最初に登録して、後で使用してください

コンポーネントでは、filters:{ filter name: fn } は return in fn を通じて最終データを返します。

グローバル Vue.filter('filter name',fn) は、fn の return を通じて最終データを返します。

{{ data | フィルター名 }} を使用します

// フィルターを使用する場合は、区切りとしてパイプ記号 ( | ) を追加する必要があります。フィルター名は、テキストの機能であるパイプ記号 | の右側にあります。
<!-- 二重中括弧内 -->
{{ メッセージ | フィルター名}}
​
<!-- `v-bind` 内 -->
<div v-bind:id="id | フィルター名"></div>

カスタムグローバルフィルター

Vue.filter('filter name', function(val) { // val は処理されるデータを表します // フィルタービジネスロジック、戻り値が必要です})
​
<div>{{ メッセージ | フィルター名}}</div>
<div v-bind="msg | フィルター名"></div>

ローカルフィルター

データ () {
    戻る {
        メッセージ: 'こんにちは世界'
    }
},
//プライベートローカルフィルターを定義します。フィルターは現在のvueオブジェクトでのみ使用できます: {
    dataFormat: (msg, a) => { // msg はフィルタリングされるデータを表し、a は入力パラメータを表します return msg + a;
    }
}
​
<p>{{ msg | dataFormat('!')}}</p> // 結果: hello world!

予防

1. グローバルに登録する場合は s なしのフィルターですが、コンポーネントフィルターは s 付きのフィルターです。 s なしで記述してもエラーにはなりませんが、フィルターの効果はありません。

2. グローバルフィルタとローカルフィルタの名前が重複している場合、近接性の原則に基づいて呼び出されます。つまり、ローカルフィルタはグローバルフィルタよりも先に呼び出されます。

3. 式では複数のフィルターを使用できます。実行順序は左から右です。前のフィルターの結果が次のフィルターの処理データとして使用されるので、使用順序に注意してください。

Vue に精通している人は、フィルターがメソッド、計算、ウォッチなどのデータ処理の目的を達成できる場合があることを知っているでしょうが、フィルターは元の値を変更できないため、それらを置き換えることはできません。フィルターの内部構造が特に複雑な場合は、計算プロパティとして記述することを検討できます。計算プロパティ自体にはキャッシュがあり、再利用性が高いのに対し、フィルターは通常、いくつかの単純な操作を実行するために使用されます。

実際の開発では、ローカル フィルターよりもグローバル フィルターの方が広く使用されています。率直に言うと、なぜフィルターを使用するのでしょうか。実は、関数を使用するのと同じです。一部のメソッドは他のコンポーネントで使用できるようにカプセル化されており、これにより、呼び出しがより便利で高速になります。

ご存知のとおり、グローバル フィルターは main.js で定義されます。ただし、プロジェクトが大きすぎてフィルターが複数ある場合、main.js はコードの塊になります。プロジェクトをモジュール化するには、これらのフィルターを均一に保存するための特別なディレクトリを用意し、処理関数を抽出して .js ファイルに配置するのが最適です。サンプル コードを以下に示します。

例1(ローカルフィルタ)

時刻または日付をフォーマットし、指定された桁数を入力し、数値が1桁未満の場合は0を入力します。

// filter/index.js ファイルエクスポートデフォルト {
    日付形式: 値 => {
        const dt = 新しい日付(値 * 1000)
    
        定数 y = dt.getFullYear()
        const m = (dt.getMonth() + 1 + '').padStart(2, '0') // .padStart(指定された桁数、"埋める符号または値")
        定数 d = (dt.getDay() + '').padStart(2, '0')
        
        定数 hh = (dt.getHours() + '').padStart(2, '0')
        定数mm = (dt.getMinutes() + '').padStart(2, '0')
        定数ss = (dt.getSeconds() + '').padStart(2, '0')
        
        `${y}-${m}-${d} ${hh}:${mm}:${ss}` を返します
    }
}
​
// .vue ファイルでローカル フィルターを使用する <script>
    '../filter' からフィルターをインポートします
​
    エクスポートデフォルト{
        …… 
        フィルター: { ...フィルター },
        データ() {
            戻る {}
        }
    }
</スクリプト>
​
<div> 日付: {{ date | dateFormat }} </div>

例2(グローバルフィルタ)

一般的な辞書項目のエコー: たとえば、性別、男性または女性、または一般的な選択の場合、バックエンドから送信されるデータは0または1であり、ページに男性または女性、またははいまたはいいえを表示する必要があります。

// constants/dictionary.js ファイル​
エクスポートconst GENDER_MENU = [
    { コード: 0、ラベル: '男性'},
    { コード: 1、ラベル: '女性'}
];
​
エクスポートconst COMMON_MENU = [
    { コード: 0、ラベル: 'いいえ'},
    { コード: 1、ラベル: 'はい'}
];
​
エクスポートデフォルト{
    性別メニュー、共通メニュー
}

filter/dict.js ファイル

// filter/dict.js ファイル​
'../constants/dictionary' から Dict をインポートします
​
エクスポートconstgenderMenu = {
    関数: 値 => {
        const ターゲット = Dict.GENDER_MENU.filter(item => {
            戻り値 item.code = value;
        })
        target.length ? target[0].label : value を返します。
    }
}
​
エクスポートconst commonMenu = {
    関数: 値 => {
        const ターゲット = Dict.COMMON_MENU.filter(item => {
            戻り値 item.code = value;
        })
        target.length ? target[0].label : value を返します。
    }
}

filter/index.js ファイル

// filter/index.js ファイル​
import * as filters from './dict' // フィルター関数をインポートする​
const インストール = Vue => {
    // インポートされたフィルターはオブジェクトです。Object.keys() メソッドを使用してキーの配列を取得します。データを反復処理し、キーをグローバル フィルターの名前として使用します。キーの後には対応する処理関数が続きます。このようにして、グローバル フィルターを任意のコンポーネントで使用できます。Object.keys(filters).forEach(key => {
        Vue.filter(キー、フィルター[キー].func)
    })
    /*
    for(const _filter in フィルター) {
        Vue.filter(`${_filter}`, フィルター[_filter].func)
    } */
}
​
デフォルトのエクスポート インストール

main.js ファイル

// main.js ファイル​
……
'./../filter/index' からフィルターをインポートします
Vue.use(フィルター)
……

.vue ファイルでのグローバル フィルターの使用

// .vue ファイルでグローバル フィルターを使用する
<p>性別: {{ gender | genderMenu }}</p>

以上がvueフィルターの使い方の詳細です。vueフィルターの詳細については、123WORDPRESS.COMの他の関連記事もご覧ください。

以下もご興味があるかもしれません:
  • VUEでフィルターを使用する方法
  • Vueフィルターとディレクティブがこれにアクセスする問題の詳細な説明
  • Vueでフィルターを使用するときにこれが未定義になる問題
  • vueフィルターがこのオブジェクトを取得できない問題を解決する
  • Vue のデータとイベントのバインディングとフィルターの詳細な説明
  • Vue のフィルターの適用シナリオの詳細な説明
  • Vue フィルターの 4 つの使用方法のまとめ

<<:  Spark RDD をデータフレームに変換し、それを MySQL に書き込む例

>>:  Nginx のタイムドログカットの詳細な説明

推薦する

Linuxでブーストライブラリをインストールするための完全な手順

序文Boost ライブラリは、標準ライブラリのバックアップとして機能し、C++ 標準化プロセスの開発...

Vue コンポーネントでのアンチシェイクとスロットリングの使用例の分析

入力ボックスへのユーザー入力、ウィンドウのサイズ変更、スクロール、Intersection Obse...

さようなら Docker: 5 分で Containerd に移行する方法

Docker は非常に人気のあるコンテナ技術です。K8S によって廃止され、別のコンテナ技術である ...

Vue3 における親コンポーネントと子コンポーネント間の値の転送の詳細な説明

vue3 が誕生してからかなり時間が経ち、筆者も最近になって vue3 を学び始めました。 vue2...

Linux の権限管理コマンド (chmod/chown/chgrp/unmask) の詳細な説明

目次chmod例権限に関する特別な注意分析するチョーンchgrp umask Linux オペレーテ...

HTML 背景画像と背景色_PowerNode Java アカデミー

1. HTML 画像 <img> 1. <img> タグとその src 属性...

nginx keepaliveの具体的な使い方

http1.1 プロトコルのデフォルトのリクエスト ヘッダーでは、図に示すように、デフォルトで ke...

Vue.jsはシンプルな折りたたみパネルを実装します

この記事では、Vue.jsの具体的なコードを共有して、シンプルな折りたたみパネルを実装する例を紹介し...

vxe-table を使用して vue で編集可能なテーブルを作成するプロセス

プロジェクトには、オンラインで編集する必要があるテーブルがあります。最初は、要素の el-table...

Docker のホスト間コンテナ通信オーバーレイ実装プロセスの詳細な説明

サーバーも 2 つあります。準備:コンテナのホスト名を設定する consul: kv タイプのストレ...

コードを通じてHTMLエスケープ文字を識別する方法について説明します

データ内に次のような特徴を持つ「 ' 」などの文字が含まれることがあります。 &# ...

JSは写真の自動再生効果を実現します

この記事では、写真の自動再生効果を実現するためのJSの具体的なコードを参考までに紹介します。具体的な...

CSS3 で King of Glory マッチング人員読み込みページを実装する方法

King of Glory をプレイしたことがある人なら、このページの効果をよくご存知でしょう。なぜ...

ページングのどのページでMySQLのレコードをクエリするか

序文実際には、次のような問題に遭遇する可能性があります。特定のレコードの ID がわかっていて、その...

Vueルーティングナビゲーションガードの簡単な理解

目次1. グローバルガード1. グローバル前線警備2. グローバル解像度ガード3. グローバルポスト...