Verwendung von Vue-Filtern

1. Was ist ein Filter?

1. Wird zur Textformatierung verwendet (im Wesentlichen eine Funktion)
2. Wird für die Interpolation in zwei Klammern und für V-Bind-Ausdrücke verwendet und '|'am Ende des Ausdrucks mit einem Pipe-Zeichen hinzugefügt

• Doppelklammerinterpolation:{ { message | capitalize}}
• v-bind Ausdruck: <div v-bind:id='rawid | formatid></div>'

Zweitens registrieren Sie den Filter

1. Registrieren Sie den globalen Filter
   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. Teilfilter registrieren Registrieren Sie sich
   in der Filter-Eigenschaft von Vue

<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>

Hinweis: Die globale Registrierung ist Filter und der Komponentenfilter ist Filter. Wenn s nicht hinzugefügt wird, wird kein Fehler gemeldet, aber es gibt keinen Filtereffekt.

3. Filterserie

• { {message | filterA | filterB}}
  Die Nachricht wird als Parameter an filterA übergeben, und der Rückgabewert von filterA wird als Parameter an filterB übergeben. Das Endergebnis wird von filterB zurückgegeben.

• { {message | filterA('arg1','arg2')}}
  Ein Filter empfängt mehrere Parameter (Nachricht, arg1, arg2)

• { {'a','b' | filterB}}
  a und b werden gleichzeitig als Parameter an fliterB übergeben

Hinweis:

1. Wenn es zwei Filter mit demselben Namen gibt, lokal und global, werden sie nach dem Prinzip der Nähe aufgerufen, dh: Der lokale Filter wird vor dem globalen Filter aufgerufen!

2. Ein Ausdruck kann mehrere Filter verwenden, und die Filter müssen durch ein Pipe-Zeichen "|" getrennt werden. Die Reihenfolge der Ausführung von links nach rechts