过滤器 – filter

作用：

（变量修饰器，管道）格式化数据，比如将字符串格式化为首字母大写、将日期格式化为指定的格式等。

过滤器可以定义成全局过滤器和局部过滤器。

过滤器的本质就是一个方法

使用过滤器实际上就相当于方法调用，仅是书写形式上的差异（使用的时候需要用“|”，其也可以被称之为管道（linux中）或变量/数据修饰符）

过滤器的使用

过滤器的处理函数中的第一个参数固定是绑定的待处理数据，后续可以根据需要添加自定义参数

提醒：

计划在Vue3.0干掉。

声明语法：

// 全局过滤器
Vue.filter('过滤器名称',function(value[,arg1,arg2...]){
	//过滤器业务逻辑
	return ....
})

// 局部过滤器
el: '#app',
data: {},
filters: {
    过滤器名称: function(value[,arg1,arg2...]){
        return something
    },
    // ....
}

使用语法：

<!-- 过滤器使用 -->
<div>{{msg | upper}}</div>

<!-- 过滤器允许连续使用，“前 → 后”按顺序执行 -->
<div>{{msg | upper | lower }}</div>

<!-- 过滤器支持在v-bind中使用 -->
<div v-bind;id='id | formatId'></div>

<!-- 过滤器支持传参 -->
<div>{{msg | mysub(1,2)}}</div>

实例：

需求：将给到的数据转化成小写后，截取前前n位

<div id="app" class>
    <p>原始数据：{{msg}}</p>
    <p>使用过滤器处理后的数据1：{{msg | dealData(9)}}</p>
</div>
<keep-alive></keep-alive>
<script src="./js/vue.js"></script>
<script>
    // 全局过滤器
    Vue.filter("dealData", function (value, length) {
        // 将给到的数据转化成小写后，截取前前n位
        return value.toLowerCase().substr(0, length);
        // return value.substr(0, length).toLowerCase();
    });
    new Vue({
        el: "#app",
        data: {
            msg:
                "jvhghijKGHJKGjjklhugujklhlklfHFKFhjkahsdhagsluduljklh",
        },
        // filters: {
        //     dealData: function (value, length) {
        //         return value.toLowerCase().substr(0, length);
        //     },
        // },
    });
</script>