Vue 過濾器使用

1、介紹

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

2、使用場景

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

3、注意

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

4、使用

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

將字符倒序渲染， 無參

<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-2、全局使用

第一步、定義單獨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>