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 をよろしくお願いいたします。

以下もご興味があるかもしれません: