概要vue2.0 より前は、組み込みフィルターがありました。2.0 では組み込みフィルターはありませんが、フィルターをカスタマイズできます。 Vue フィルターに関しては、公式ドキュメントに次のように記載されています。 Vue.js を使用すると、一般的なテキストの書式設定に使用できる独自のフィルターを定義できます。フィルターは、二重中括弧補間と v-bind 式の 2 つの場所で使用できます (後者は 2.1.0 以降でサポートされています)。フィルターは、JavaScript 式の最後に「パイプ」記号で示されて追加する必要があります。 つまり、フィルターはデータをフォーマットするために使用される関数です。フィルターは元のデータを変更しません。フィルターの機能は、データをフィルター処理すること、つまり、データ形式や状態変換などを変更して、データを処理して処理済みのデータを返すことです。 フィルターには2種類あります
フィルターの定義最初のパラメータはフィルターの名前です。 2 番目のパラメーターはフィルターの機能です (vue が定義されていない場合、この文字列が何であるか、何をするかはわかりません)。 フィルター機能
フィルターの使用最初に登録して、後で使用してください コンポーネントでは、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の他の関連記事もご覧ください。 以下もご興味があるかもしれません:
|
<<: Spark RDD をデータフレームに変換し、それを MySQL に書き込む例
この記事は、CentOS 7の詳細なインストールチュートリアルを参考のために記録します。具体的な内容...
0. はじめにibdata1 ファイルとは何ですか? ibdata1 は、innodb システム テ...
この記事では、パーセンテージスコアリングプログレスバーを実現するためのjQueryの具体的なコードを...
NULL が頻繁に使用されるのはなぜですか? (1)Javaのnull Java の NullPoi...
目次メモリプールの概要1. nginxデータ構造2. nginxはOSからスペースngx_creat...
Docker コンテナのタイムゾーンがホストマシンと一致しているかどうかを確認するにはどうすればよい...
環境準備: VMware+CentOS、jdk 1. システムディスクのサイズを確認する1. コマン...
1.1 データ型の概要データ型は、各フィールドに保存できるデータの種類、保存できるデータの量、保存で...
背景社内に新しいサーバーが追加され、2Tのハードディスクがマウントされました。sshでログイン後、マ...
問題を見つける最近 Django を学習しているのですが、MySQL データと組み合わせてデータを挿...
問題の説明: docker run -p 19918:19918/tcp -v /etc/local...
1: syslog.conf の概要異なるタイプの Unix の場合、標準の UnixLog システ...
数年前、Taobaoのモバイル版の左下隅に面白い丸いボタンがあったことを覚えています。それをクリック...
序文通常のビジネスニーズ: 写真、Excel などをアップロードします。結局のところ、数 MB のサ...
実行後、一部の Docker コンテナが終了することがあります。原因を調べるには、Docker コン...