过滤器
过滤器（Filters）是 vue 为开发者提供的功能，常用于文本的格式化。过滤器可以用在两个地方：插值表达式和 v-bind 属性绑定。
过滤器应该被添加在 JavaScript 表达式的尾部，由“管道符”进行调用，示例代码如下：
<body>
<div id="app">
<p>message 的值是{{message | capi}}</p>
</div>
<script src="./lib/vue-2.6.12.js"></script>
<script>
const vm = new Vue({
el:'#app',
data:{
message:'hello vue'
},
// 过滤器函数必须被定义到 filters 节点之下
filters:{
// 过滤器函数形参中的 val 永远都是管道符前面的那个值
capi(val){
// 强调过滤器中一定要有一个返回值
const first = val.charAt(0).toUpperCase()
// 字符串的 slice 方法，可以截取字符串，从指定索引往后截取
const other = val.slice(1)
return first + other
}
}
})
</script>
</body>
message 的值是Hello vue
私有过滤器和全局过滤器
在 filters 节点下定义的过滤器，称为“私有过滤器”，因为它只能在当前 vm 实例所控制的 el 区域内使用。
如果希望在多个 vue 实例之间共享过滤器，则可以按照如下的格式定义全局过滤器：
// 使用 Vue.filter() 定义全局过滤器
Vue.filter('capi',function(str){
const first = str.charAt(0).toUpperCase()
const other = str.slice(1)
return first + other + '~~~'
})
过滤器的注意点：
1.要定义到 filters 节点下，本质是一个函数
2.在过滤器函数中，一定要有 return 值
3.在过滤器的形参中，就可以获取到“管道符”前面待处理的那个值
4.如果全局过滤器和私有过滤器名字一致，此时按照“就近原则”，调用的是“私有过滤器”。
利用过滤器进行时间格式化
day.js官网 https://dayjs.fenxianglu.cn/
未时间格式化：Thu Dec 22 2022 16:08:26 GMT+0800 (中国标准时间)
时间格式化后：2022-12-22 16:08:26
<body>
<div class="app">
<p>未时间格式化：{{time}}</p>
<p>时间格式化后：{{time | dateFormat}}</p>
</div>
<script src="./lib/dayjs.min.js"></script>
<script src="./lib/vue-2.6.12.js"></script>
<script>
// 定义格式化时间过滤器
Vue.filter('dateFormat',function(time){
const datestr = dayjs(time).format('YYYY-MM-DD HH:mm:ss')
return datestr
})
const vm = new Vue({
el:'.app',
data:{
time:new Date()
}
})
</script>
</body>
连续调用多个过滤器
过滤器传参
过滤器的本质是 JavaScript 函数，因此可以接收参数，格式如下：
