Vue 的过滤器

前言：Vue 中的过滤器（filter）不能替代 Vue 中的 methods、computed 或者 watch等生命周期，过滤器的本质不改变真正 data 里面的数据，而只是改变渲染的结果，并返回过滤后的版本。例如：页面上大小写字母转换，数字换算人命币，添加千字符等。

Vue 的过滤器工作基本没啥用，但面试爱考。

一、定义和使用过滤器

过滤器分为全局定义和局部定义两种方式。

全局定义：任何子组件都能够使用

使用的时候在双花括号中使用管道符(pipeline) |隔开，或者v-bind 表达式(v2.1.0以上支持)
例子小写变大写：

//全局定义
Vue.filter("daxie",function(value){
    return value.toUpperCase()
});

子组件使用

<template>
    <div>
        <h1>{{str | daxie}}</h1>
    </div>
</template>
<script>
    export default {
        data(){
            return {
                str : "abcdefghi",
            }
        }
    }
</script>
<style>
</style>

本过过滤器

五个例子：

注意的是还可以链式使用，但要注意先后的顺序。过滤器函数还可以接收多个参数。

<template>
    <div>
        <div>本地小写变大写 {{str | Upper}}</div>
        <div>本地大写变小写 {{little | Lower}}</div>
        <div>数字添加人民币符号 {{price | toRMB}}</div>
        <div>添加千字符 {{thousands | thousand}}</div>
        <div><b>古诗改错西该为东：</b>{{text | readMore(0,"东")}}</div>
    </div>
</template>
<script>
    export default {
            data(){
                return {
                    str : "abcdefghi",
                    little:"EEEEEEEEEEE",
                    price:15,
                    thousands:"18973573275642767263",
                    text: '西风夜放花千树，更吹落，星如雨。宝马雕车香满路。凤箫声动，玉壶光转，一夜鱼龙舞。蛾儿雪柳黄金缕，笑语盈盈暗香去。众里寻他千百度，蓦然回首，那人却在，灯火阑珊处。'
                }
            },
        // 声明一个本地的过滤器
        filters: {
        　　　Upper: function (value) {
                return value.toUpperCase()
            },
            Lower: function (value) {
                return value.toLowerCase()
            },
            toRMB:function(value) {
                return `￥${value}`;
            },
            thousand:function(value){
                return value.replace(/\B(?=(.{3})+$)/g, ',');
            },
            readMore: function (text, length, suffix) {
                // 后面两个接收参数，这里length为0，suffix为"东"
                return suffix + text.substring(1, text.length)
            }
        }
    }
</script>
<style>
</style>

本过过滤器