Vue グローバルフィルターの概念、注意事項、基本的な使用方法

1. フィルターの概念

Vue.jsでは、一般的なテキストフォーマットに使用できるフィルターをカスタマイズできます。フィルターは、マスタッシュ補間とv-bind式の2つの場所で使用できます。

1. グローバルフィルターのフォーマットをカスタマイズする

Vue.filter('将来呼び出される際のフィルタ名'、フィルタ処理関数)

2. フィルターの呼び出し方法

 <!-- フィルターを呼び出すときは、| を使用して呼び出す必要があります。| はパイプ文字と呼ばれます -->
      <td>{{item.ctime | formatDate}}</td>

フィルター処理関数では、最初のパラメーターは固定されており、常にパイプ文字の前の値になります。

// ここでのデータはパイプ文字の前の item.ctime の値です Vue.filter('formatDate',function(data){

})
// フィルタには戻り値が必要です

3. フィルターに関する注意事項

Vue.filter('フィルター名', フィルター処理関数)
注: フィルター処理関数では、最初のパラメーターには定義された関数があり、常にパイプ文字の前の値になります。
フィルター{{item.ctime | formmatDate}}を呼び出します。フィルターを呼び出すときは、パイプ文字と呼ばれる | を使用して呼び出す必要があります。
フィルターを呼び出すときにパラメータを渡すことができます。 {{item.ctime | formmatDate('傳遞參數')}}
注: 最初のパラメータはパイプ文字の前の値で占有されているため、フィルターの呼び出しによって渡されるパラメータは、処理関数の 2 番目のパラメータからのみ受け取ることができます。
注: フィルタの処理関数は値を返す必要があります
パイプ文字を使用して、複数のフィルターを連続して呼び出すことができます。最終的な出力結果は常に最後のフィルターに基づきます。
注意: フィルターは補間式またはv-bindでのみ使用でき、 v-textなどの他の場所では使用できません。

4. 基本的な使い方

vue補間式を使用してページ上に文章をレンダリングする

  <div id="アプリ">
        <h3>{{mes}}</h3>
    </div>

<script src="./js/vue.js"></script>
    <スクリプト>
        vm = new Vue({
            el:'#app',
            データ：{
                mes: 「私は悲観的な人間です。そして悲観的な人間は悲観的なことをします」
            }
        })
    </スクリプト>

要件:要件: Vue の MES ソースデータが変更できない場合は、「悲観的」という単語を「明るい」に置き換えます。

まず、スクリプトタグ内のグローバルフィルターをカスタマイズし、フィルターに独自の名前を付けます。

 Vue.filter('setStr',function(data){
        })

フィルターにメソッドを定義します。

 Vue.filter('setStr',function(data){
            // フィルターには戻り値が必要です return data.replace(/pessimistic/g,'cheerful')
            // 文字列操作メソッド replace を使用して、文字列内の特定の要素を他の要素に置き換えます。g はグローバル一致を表します})

次に補間式でフィルタを呼び出します

<div id="アプリ">
        <h3>{{mes | setStr}}</h3>
    </div>

効果を確認するには、次のページにアクセスしてください。

基本フィルタが定義される

メソッド内で置換する文字を指定せずに、フィルター関数内で仮パラメータを指定することもできます。

Vue.filter("strFormat",function(data,str){ // データの後にパラメータを指定できます // フィルタには戻り値が必要です return data.replace(/pessimistic/g,str)
            // 文字列操作メソッド replace を使用して、文字列内の特定の要素を他の要素に置き換えます。g はグローバル一致を表します})

次に、呼び出し時に実際のパラメータを指定します。

<div id="アプリ">
        <h3>{{mes | setStr("不注意")}}</h3>
    </div>

結果を表示:

仮パラメータにはデフォルト値を与えることもできます。呼び出し時に実パラメータを与えない場合はデフォルト値が出力されます。実パラメータを与えた場合は実パラメータの値が出力されます。

<div id="アプリ">
        <h3>{{mes | setStr}}</h3>
    </div>

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

        Vue.filter('setStr',function(data,str="注意"){
            // フィルターには戻り値が必要です return data.replace(/pessimistic/g,str)
            // 文字列操作メソッド replace を使用して、文字列内の特定の要素を他の要素に置き換えます。g はグローバル一致を表します})

結果は次のとおりです。

以上で、vue グローバルフィルターの概念、注意事項、基本的な使い方についての説明は終了です。vue グローバルフィルターに関するより詳しい内容については、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

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