Vueはプライベートフィルターと基本的な使用法を定義します

Vueはプライベートフィルターと基本的な使用法を定義します
プライベート フィルターとグローバル フィルターのメソッドと概念は同じですが、プライベート フィルターは自分だけが呼び出すことができるのに対し、プライベート フィルターはグローバルに呼び出すことができるという点が異なります。
グローバルフィルター ここをクリックグローバルフィルター
使い方はグローバルフィルタと同じですが、定義が異なります
グローバルフィルターはscript内でVue.filterを通じて定義されます。
プライベートフィルタの定義方法:
<スクリプト>
        vm = new Vue({
            el:'#app',
            データ:{
            
            },
            フィルター: { // このインスタンスのプライベートフィルター}
        })
    </スクリプト>
vmインスタンスには、 dataと同じレベルのfiltersがあり、現在のインスタンスのプライベート フィルターを定義するために使用されます。
    <div id="アプリ">
        <p>{{mes | 追加Str}}</p>
    </div>

    <script src="./js/vue.js"></script>
    <スクリプト>
        vm = new Vue({
            el:'#app',
            データ:{
                mes: 「私は悲観的な人間です。そして悲観的な人間は悲観的なことをします」
            },
            フィルター: { // 現在のインスタンスのプライベートフィルター addStr(data,str="happy"){
                    戻り値 data.replace(/pessimistic/g,str)
                }
            }
        })
    </スクリプト>
出力は次のようになります。
ページに 2 番目のインスタンスvm2がある場合、 vm内のフィルターは呼び出すことができません。
ページにグローバルフィルターとプライベートフィルターがある場合、それらを同時に呼び出すことができます。
<div id="アプリ">
        <p>{{mes | setStr | addStr}}</p>
    </div>

    <script src="./js/vue.js"></script>
    <スクリプト>

        Vue.filter('setStr',function(data){
            データを返す+'私はグローバルフィルターです'
        })

        vm = new Vue({
            el:'#app',
            データ:{
                mes: 「私は悲観的な人間です。そして悲観的な人間は悲観的なことをします」
            },
            フィルター: { // 現在のインスタンスのプライベートフィルター addStr(data,str="happy"){
                    戻り値 data.replace(/pessimistic/g,str)
                }
            }
        })
    </スクリプト>
出力:
要約:
呼び出しの際には、グローバルを前に、プライベートを後ろに呼び出します
しかし、出力結果ではプライベートフィルタが最初に処理される。
したがって、グローバル フィルターとプライベート フィルターを同時に呼び出す場合、呼び出しルールでは、近い方のフィルターが最初に出力されます。
最初はプライベート、次にグローバル

これで、vue のプライベート フィルターの定義と基本的な使用法に関するこの記事は終了です。より関連性の高い vue のプライベート フィルターの定義については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vueでのフィルターの使用
  • メンバーの追加や削除時に Vue オブジェクトをリアルタイムで更新できない問題の解決方法
  • Vue 基本構文における補間式の詳細な説明
  • Vue補間式の簡単な紹介Mustache
  • Vue の v-if/v-show/補間式によって発生する点滅の原因と解決策
  • Vueインスタンスメンバー補間式フィルター基本チュートリアル例詳細説明

<<:  CSS3 で高さと幅を不定にして垂直と水平に中央揃えするいくつかの方法

>>:  枠線や境界線のない iframe を使用するための完全ガイド (実践経験のまとめ)

推薦する

原因不明のMySqlサービス消失の解決策

原因不明のMySqlサービス消失の解決策先ほど、MySQL-Front が突然 MySql を開けな...

mysql ステートメントを使用してユーザー権限を照会するプロセスの詳細な説明

MySQL では、ユーザーに付与された権限をどのように確認しますか? ユーザーに付与される権限は、グ...

Nginx コンテンツ キャッシュと共通パラメータ設定の詳細

使用シナリオ:プロジェクトのページでは、頻繁に変更されず、個別のカスタマイズも伴わない大量のデータを...

JS で if 判定をスムーズに行う方法

目次序文コードの実装アイデア 1アイデア2要約する参照ドキュメント序文プロジェクト内の小さな要件ポイ...

追加、削除、変更、クエリを実行するための JS 操作オブジェクト配列のサンプルコード

1. はじめに最近、私は友人が JSON 配列を追加、削除、変更するための簡単なページを作成するのを...

MIME タイプの完全なリスト

MIME タイプとは何ですか? 1. まず、ブラウザがコンテンツを処理する方法を理解する必要がありま...

1 分で Nginx のバージョンをスムーズにアップグレードおよびロールバックする方法

今日は、企業の実際の本番環境でよく遭遇する、Nginx を新しいバージョンにアップグレードし、古いバ...

Linux における「!」の知られざる使用法のまとめ

序文実際、Linux では、控えめな「!」が驚くほど多くの用途で使用されています。この記事では、「!...

登録フォームのデザインルール

随分前に「Patterns for Sign Up & Ramp Up」を読み終えました。今...

Nginxにモジュールを動的に追加する方法

前面に書かれた多くの場合、現在のプロジェクトの状況とビジネスニーズに基づいて Nginx をインスト...

MySQLデータストレージプロセスパラメータの詳細な例

MySQL ストアド プロシージャ パラメータには、in、out、inout の 3 種類があります...

SecureCRT に基づくリモート Linux ホストへのファイルのアップロードとダウンロードのグラフィカルな手順

wget や curl ツールを使用して、Linux サーバーで大規模なネットワーク ファイルを直接...

美しいチェックボックススタイル(複数選択ボックス)はIE8/9/10、FFなどと完全に互換性があります。

恥ずかしながら、このようなよく使われるチェックボックスのスタイルを変更するために、Baidu で長い...

MySQL SQL ステートメントが遅い場合の一般的な原因と解決策

1. インデックス不足または無効なインデックスによるクエリの遅延数千万件のデータを含むテーブルで、イ...

MySQL パフォーマンス最適化のための魔法のツール、Explain の基本的な使用分析

導入MySQL には、SELECT ステートメントを分析し、開発者が最適化できるように SELECT...