项目经验---vue2的filters（过滤器）使用方法

过滤器（Filters）是 vue 为开发者提供的功能，常用于文本的格式化。过滤器可以用在两个地方：插值表达式和 v-bind 属性绑定。 过滤器应该被添加在 JavaScript 表达式的尾部，由“管道符”进行调用

1.私有过滤器

<template>
	<div class="homes">
		<div class="oldData">{{age}}</div>
		<div :id='age | addAge'>{{age|changeAge}}</div>
	</div>
</template>
 
<script>
	export default{
		data() {
			return{
				age:23
			}
		},
		filters:{
			changeAge(age){
				return '我今年' + age + '岁啦！' 
			},
			addAge(age){
				// 年龄+1
				return age+1
			}
		}
	}
</script>

2.全局过滤器

在 filters 节点下定义的过滤器，称为“私有过滤器”，因为它只能在当前 vm 实例所控制的 el 区域内使用。如果希望在多个 vue 实例之间共享过滤器，则可以按照如下的格式定义全局过滤器：

//过滤器可以与 {{ }} 绑定一起使用，也可以在v-bind 中使用。如下代码可以将一个字符串略缩为一个定长字符串：
<p>{i description | truncate }}</p>
 
//在Vue.js中通过调用 Vue.filter() 可以全局注册一个过滤器，可以在其它的 Vue 实例中使用。
//这个方法有两个参数，第一个参数是过滤器的名称，第二个参数是一个函数，这个函数被用来处理需要过滤的值。
//truncate 是过滤器的名称，它接收一个字符串并将其截断为指定的长度.
Vue.filter( 'truncate', function (text,length,suffix){
    if (text.length > length){
        return text.substring(0，length) + suffix;}
    else {
        return text;
    }
});

3.注意

1. 要定义到 filters 节点下，本质是一个函数
2. 在过滤器函数中，一定要有 return 值
3. 在过滤器的形参中，可以获取到“管道符”前面待处理的那个值
4. 如果全局过滤器和私有过滤器名字一致，此时按照“就近原则”，调用的是”私有过滤器“