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 のタイムドログカットの詳細な説明

推薦する

CentOS 7のインストールと設定方法のグラフィックチュートリアル

この記事は、CentOS 7の詳細なインストールチュートリアルを参考のために記録します。具体的な内容...

MySQL FAQ シリーズ: ibdata1 ファイルのサイズが突然増加しないようにする方法

0. はじめにibdata1 ファイルとは何ですか? ibdata1 は、innodb システム テ...

jQuery はパーセンテージスコアリングの進捗バーを実装します

この記事では、パーセンテージスコアリングプログレスバーを実現するためのjQueryの具体的なコードを...

MySQLフィールド定義でnullを使用しない理由の分析

NULL が頻繁に使用されるのはなぜですか? (1)Javaのnull Java の NullPoi...

Nginx メモリプールのソースコード分析

目次メモリプールの概要1. nginxデータ構造2. nginxはOSからスペースngx_creat...

Dockerコンテナのタイムゾーン調整操作

Docker コンテナのタイムゾーンがホストマシンと一致しているかどうかを確認するにはどうすればよい...

VMware 上の CentOS に Oracle12.2 をサイレント インストールする詳細なグラフィック チュートリアル

環境準備: VMware+CentOS、jdk 1. システムディスクのサイズを確認する1. コマン...

(MariaDB) MySQL のデータ型とストレージメカニズムの包括的な説明

1.1 データ型の概要データ型は、各フィールドに保存できるデータの種類、保存できるデータの量、保存で...

Linux クラウド サーバーに新しいディスクをマウントする方法

背景社内に新しいサーバーが追加され、2Tのハードディスクがマウントされました。sshでログイン後、マ...

Ubuntu 上の MySQL における中国語文字化け問題の解決方法

問題を見つける最近 Django を学習しているのですが、MySQL データと組み合わせてデータを挿...

Linux での syslogd および syslog.conf ファイルの解釈

1: syslog.conf の概要異なるタイプの Unix の場合、標準の UnixLog システ...

CSSは2つの要素をブレンドする効果(スティッキー効果)を実現します。

数年前、Taobaoのモバイル版の左下隅に面白い丸いボタンがあったことを覚えています。それをクリック...

Node.js でのブレークポイント再開の実装

序文通常のビジネスニーズ: 写真、Excel などをアップロードします。結局のところ、数 MB のサ...

Dockerコンテナ終了エラーコードの手順

実行後、一部の Docker コンテナが終了することがあります。原因を調べるには、Docker コン...