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 を使用するための完全ガイド (実践経験のまとめ)

推薦する

Linux サーバー上で nvidia-docker 環境を設定するプロセスの詳細な説明

Docker はコンテナに相当し、必要な動作環境に応じて対応する動作環境を構築できます。このとき、各...

MySQLパラダイムの使用に関する詳細な説明

1. パラダイムこのパラダイムの英語名は Normal Form であり、1970 年代にリレーショ...

Windows サーバー管理におけるセキュリティの考慮事項

ウェブサーバー1. Webサーバーは、wev、cgi、asp機能を無効にするなど、不要なIISコンポ...

中国のウェブサイトユーザーエクスペリエンスランキング

<br />ユーザーエクスペリエンスは中国のウェブサイトでますます重視されており、ユーザ...

DockerのTLS(SSL)証明書の有効期限の問題を解決する

問題現象: [root@localhost ~]# docker イメージをプル xxx.com.c...

Ubuntu で起動時に自動的に起動するシェル スクリプトを作成する (推奨)

スクリプトを書く目的は、さまざまなサービスを手動で起動しなくて済むようにすることです(怠惰のためでも...

CentOS 7.9 の zabbix5.0.14 のインストールと設定プロセス

目次1. 基本的な環境設定2. データベースをインストールする3. zabbix関連コンポーネントを...

Vueのフロントエンドとバックエンドのデータのやり取りと表示を理解する方法

目次1. 技術概要2. 技術的な詳細1. インターフェースからバックエンドデータを取得する2. フロ...

Docker で Nginx イメージ サーバーを構築する方法

序文一般的な開発では、画像をディレクトリにアップロードし、ディレクトリとファイル名を連結してデータベ...

小さなプログラムが天井に張り付いてしまう問題を完璧に解決するためにposition:stickyを使用する方法

最近、あるプロジェクトのクライアントが、上部に 2 つのタブ メニューを配置することを要求しました。...

Tinymce リッチテキストを使用して Vue のツールバーボタンをカスタマイズする実践

目次tinymce、tinymce ts、tinymce-vue 宣言ファイルをインストールするパッ...

HTML 5のドラフトは正式な標準にはならなかった

<br />昨日、W3C で新しいHTML 5 ドラフト (ワーキング ドラフト) が ...

JavaScript 配列の詳細な概要

目次1. 配列誘導1. 文字列を配列に分割する2. コレクションとマップを新しい配列に変換する3. ...

W3C チュートリアル (6): W3C CSS アクティビティ

スタイル シートは、ドキュメントの表示方法、発音方法、または入力方法を記述します。スタイル シートは...

読み込み進捗バーのネイティブ JS 実装

この記事では、ネイティブ JS によって実装された動的読み込みプログレス バーの特殊効果を紹介します...