Vue
Vue2的过滤器，Vue3过滤器替代方案
07-29 11:49Vue2中的过滤器常用于文本的格式化，例如：hello -> Hello
使用方法：
过滤器应该被添加在javascript表达式的尾部，由“管道符”进行调用，示例代码：
<!-- 在双花括号中通过管道符调用 cap 过滤器，对 message 的值进行格式化 -->
<p>{{ message | cap }}</p>
<!-- 在 v-bind 中通过管道符调用 format 过滤器，对 id 的值进行格式化 -->
<div v-bind:id="id | format"><div>
过滤器可以用在两个地方，插值表达式和v-bind属性绑定
在插值表达式中，变量后面多了一个竖线，这个竖线就叫做管道符，竖线后面的就是过滤器，表示把前面的值在输出之前交给过滤器处理，最终输出的内容是过滤器返回的值
过滤器本质上就是一个函数，在过滤器处理函数的形参中，第一个参数永远都是管道符前面的值
定义过滤器
在创建vue实例期间，可以在filters节点中定义过滤器，示例代码如下：
new vue({
data() {
return {
id: 10,
message: "hello"
}
},
filters: { // 在filters节点下定义“过滤器”
cap(str){ //把首字母转为大写的过滤器，str是个形参，表示管道符前面待处理的数据
return str.charAt(0).toUpperCase() + str.slice(1)
}
}
})
私有过滤器和全局过滤器
在filters节点下定义的过滤器，被称为“私有过滤器”，因为它只能在当前vm实例所控制的el区域内使用。
如果希望在多个vue实例之间共享过滤器，则可以按照如下格式定义全局过滤器：
//全局过滤器 - 独立于每个vm实例之外
//Vue.filter()方法接收两个参数：
//第一个参数，是全局过滤器的“名字”
//第二个参数，是全局过滤器的”处理函数“，第一个形参永远都是管道符前边待处理的数据，
Vue.filter('cap', (str)=>{
return str.charAt(0).toUpperCase() + str.slice(1)
})
全局过滤器写在示例化vue之前
如果全局过滤器和私有过滤器名字冲突，实行就近原则，优先使用私有过滤器
连续调用多个过滤器
过滤器可以串联的进行调用，例如：
<!-- 把message的值，交给cap进行处理 -->
<!-- 把cap处理的结果，再交给format进行处理 -->
<!-- 最终把format处理的结果，作为最终的值渲染到页面上 -->
{{ message | cap | format }}
过滤器传参
过滤器的本质是javascript函数，因此可以接收参数，格式如下：
<!-- arg1 和 arg2 是传递给 cap 的参数 -->
<p>{{ message | cap(agr1, arg2) }}</p>
//过滤器处理函数的形参列表中，第一个参数永远都是管道符前面待处理的值，从第二个参数开始，才是调用函数传递过来的arg1和arg2参数
Vue.filter('cap', (msg, arg1, arg2)=>{
//过滤器的代码逻辑...
})
