Vueフィルターの使用

1.フィルターとは何ですか？

1. テキストの書式設定に使用されます（基本的には関数）
2. 以下のために使用される二重ブラケット補間とV-バインド式、'|'の末尾に追加表現パイプ文字で

• 二重括弧補間：{ { message | capitalize}}
• vバインド式： <div v-bind:id='rawid | formatid></div>'

次に、フィルターを登録します

1. グローバルフィルターを登録する
   Vue.filter('filtername',function(value){...})

<div id="demo1">
    <input type="text" v-model='message'>
    <br>
    {
   
   {message | myfile}}
</div>

<script>
    // 定义全局过滤器
    Vue.filter('myfile',function(value){
     
     
        if(!value) return ''
        value=value.toString();  //把value值转换为字符串
        return value.toUpperCase()   //转换为大写
    })
    new Vue({
     
     
        el:'#demo1',
        data:{
     
     
            message:'abc'
        }
    })
</script>

2. 部分フィルターの登録
   Vueのfiltersプロパティに登録します

<div id="demo2">
    <input type="text" v-model='message'>
    <br>
    {
   
   {message | myfile}}
</div>

<script>
    // 定义局部过滤器
    new Vue({
     
     
        el:'#demo2',
        data:{
     
     
            message:'abc'
        },
        filters:{
     
     
            myfile:function(value){
     
     
                if(!value) return ''
                value=value.toString();  //把value值转换为字符串
                return value.toUpperCase()   //转换为大写
            }
        }
    })
</script>

注：グローバル登録はフィルターであり、コンポーネントフィルターはフィルターです。sが追加されていない場合、エラーは報告されませんが、フィルター効果はありません。

3. フィルターシリーズ

• { {message | filterA | filterB}}
  メッセージはパラメーターとしてfilterAに渡され、filterAの戻り値はパラメーターとしてfilterBに渡されます。最終結果はfilterBによって返されます。

• { {message | filterA('arg1','arg2')}}
  フィルタは複数のパラメータ（メッセージ、arg1、arg2）を受け取ります

• { {'a','b' | filterB}}
  aとbはパラメータとして同時にfliterBに渡されます

注意：

1. ローカルとグローバルの同じ名前の2つのフィルターがある場合、それらは近接の原則に基づいて呼び出されます。つまり、ローカルフィルターはグローバルフィルターの前に呼び出されます。

2. 式は複数のフィルターを使用でき、フィルターはパイプ文字「|」で区切る必要があります。実行の順序、左から右へ