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>