Vue 過濾器使用

一、介紹

對文本進行轉化操做，並渲染轉化後的值，並不會改變data中的屬性的值；

二、使用場景

• 在模板的花括號{{ 文本變量 | 過濾器}}內使用
• 在模板指令`v-bind:src="文本變量 | 過濾器"``中使用

三、注意

• 過濾器對值進行轉化後並不會影響轉化以前的data值，只是改變渲染結果；
• 過濾器徹底能夠轉化爲對應的方法， 如message | myfun 徹底能夠當作：myfun(message)，過濾器自己就是一個純函數(一個函數的返回結果只會依賴於它的參數，並不會依賴於外部變量)，因此不該該依賴於data中的數據，並且在過濾器中的this永遠指的是undefined
• 過濾器優先級： 局部過濾器 > 全局過濾器
• 過濾器能夠串聯，執行順序：從左到右依次執行， 書寫方式： {{文本 | 過濾器1 | 過濾器2 | 過濾器n}}

四、使用

4-一、局部使用。在組件或頁面中定義

將字符倒序渲染， 無參

<template>
    // 渲染爲（edcba）
    <h3>{{myText | myFilter}}</h3>
</template>

<script>
    export default {
        data() {
            return {  myText: 'abcde'  }
        },
        filter: {
            myFilter: function(val) {
                return val.split('').reverse().join('');
            }
        }
    }
</script>

將字符倒序渲染， 有參

<template>
    // 渲染爲（名稱1：edcba）
    <h3>{{myText | myFilter(name, '1')}}</h3>
</template>

<script>
    export default {
        data() {
            return {  name: '名稱',  myText: 'abcde'  }
        },
        filter: {
            myFilter: function(val, val1, val2) {
                return val1+val2 + ':' + (val.split('').reverse().join(''));
            }
        }
    }
</script>

4-二、全局使用

第一步、定義單獨filter.js文件

let toUpperCase=value=>{
　　return value.toUpperCase();
}
let toLowerCase=value=>{
　　return value.toLowerCase();
}

export {toUpperCase,toLowerCase}

第二步、main.js中引用

import * as filters from 'filter.js'

// Object.key(obj) =》返回key值的數組集合：["toUpperCase", "toLowerCase"]
Object.key(filters).each(filter=>{
　　Vue.filter(filter,filters[filter]);
});

第三步、在頁面中使用

<template>
    // 渲染結果爲： ABCD
    <h3>{{myText | toUpperCase}}</h3>
</template>
<script>
    export default {
        data() {
            return { myText: 'abcd' }
        }
    }
</script>