2-04-过滤器

一、什么是过滤器

过滤器（Filters）是vue为开发者提供的功能，常用于文本格式化，

二、如何使用过滤器

过滤器可以用在两个地方：插值表达式和v-bind属性绑定。

过滤器应该被添加在Javascript表达式尾部，由”管道符”进行调用，示例代码如下：

更详细的示例代码如下：

<body>

<div id="app">

<p>{{ message | capi }}</p>

</div>

</body>

<script src="./vue.js"></script>

<script>

new Vue({

el: "#app",

data: {

message: "hello vue.js"

},

filters: {

capi(val) {

const first = val.charAt(0).toUpperCase();

const other = val.slice(1);

return first + other;

}

}

});

</script>

三、全局过滤器

以上在filters节点下定义的过滤器成为私有过滤器，只能作用于vm实例中el所指定的元素内。

如果希望多个vm实例之间共享过滤器，则可以按照如下格式定义全局过滤器：

四、注意点

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

五、使用dayjs.min.js格式化时间

dayjs.min.js
是一个时间相关的统一解决库，可以很简单地格式化Date()对象，转换成易读的时间格式。

具体使用方法可见官方文档

以下展示格式化的使用方法：

<body>

<div id="app">

<!-- <p>{{ new Date() | dateformat }}</p> -->

<p>{{ time | dateformat }}</p>

</div>

</body>

<script src="./vue.js"></script>

<script src="./dayjs.min.js"></script>

<script>

Vue.filter('dateformat', function(time) {

return dayjs(time).format('YYYY-MM-DD HH:mm:ss')

});

new Vue({

el: "#app",

data: {

time: new Date()

}

});

</script>