Vue 17 - 用过滤器实现时间戳转换
目录
功能说明
过滤器介绍
过滤器处理运行原理
代码
全局过滤器
功能说明
我们想要从将原始的unix时间转换为格式化时间
我们会用如下方法去实现：
1. 计算属性computed实现时间转换。
2. methods方法实现时间转换。
3. 过滤器实现时间转换。
4. 过滤器指定时间格式。
5.两个过滤器并用。
过滤器介绍
Vue.js 中的过滤器（Filter）是一种简单的功能，用于将输出数据按照特定的方式进行格式化。过滤器可以在输出数据之前对其进行转换，以便更好地呈现给用户。
Vue.js 的过滤器使用方式非常简单，只需要在模板中使用管道符 | 将数据传递到过滤器中，然后在过滤器中对数据进行处理，最后将处理后的数据返回即可。
<template><div><p>{{ message | capitalize }}</p></div>
</template><script>
export default {data() {return {message: 'hello world'}},filters: {capitalize(value) {if (!value) return ''value = value.toString()return value.charAt(0).toUpperCase() + value.slice(1)}}
}
</script>
在上面的例子中，我们定义了一个名为 capitalize 的过滤器，用于将字符串的第一个字母大写，然后在模板中使用 message | capitalize 的方式调用过滤器来格式化数据。
过滤器处理运行原理
代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>过滤器</title><script type="text/javascript" src="../js/vue.js"></script><script type="text/javascript" src="../js/dayjs.min.js"></script>
</head><body><div id="root"><h2>显示格式化后的时间</h2><h3>原始时间是:{{time}}</h3><h3>计算属性实现时间是:{{fmtTime}}</h3><h3>methods实现时间是:{{convertTime()}}</h3><h3>过滤器实现的时间是:{{time | timeFormater}}</h3><h3>指定格式过滤器实现的时间是： {{time | timeFormater('YYYY-MM-DD')}}</h3><h3>截取年份过滤器实现的时间是： {{time | timeFormater('YYYY-MM-DD') |timeSlice}}</h3></div></body>
<script>Vue.config.productionTip = false // 阻止vue在启动时生成生产提示new Vue({el: '#root',data: {time: Date.now()},computed: {fmtTime() {return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss')}},methods: {convertTime() {return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss')}},// 局部过滤器filters: {timeFormater(value, str='YYYY-MM-DD HH:mm:ss'){return dayjs(this.time).format(str)},timeSlice(value){return value.slice(0,4)}}})</script></html>全局过滤器
在以上的代码中，我们的过滤器是局部过滤器，当有多个vue实例时，不能全局使用。
Vue.js 的全局过滤器是一种可以在任何 Vue 实例中使用的函数，它可以用来格式化或转换数据。使用全局过滤器可以使得代码更加简洁和易读。
Vue 提供了 Vue.filter 方法来定义全局过滤器，它接受两个参数：
id：过滤器的名称definition：过滤器的函数定义
Vue.filter('capitalize', function(value) {if (!value) return ''value = value.toString()return value.charAt(0).toUpperCase() + value.slice(1)
})
上面的例子中，我们定义了一个名为 capitalize 的全局过滤器，它将字符串的第一个字符转换成大写字母。现在我们可以在任何 Vue 实例中使用这个过滤器：
<div>{{ message | capitalize }}</div>
那么在，本次功能里，我们就可以将截取的过滤器配置到全局。改造如下。在原来的filters中就可以删除了局部过滤器实现。
Vue.filter('timeSlice', function(value){return value.slice(0,4)})
