Vue 17 - 用过滤器实现时间戳转换

最新推荐文章于 2024-04-08 18:26:16 发布

大力pig

最新推荐文章于 2024-04-08 18:26:16 发布

阅读量597

点赞数

分类专栏： js 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_53753920/article/details/130027017

版权

js 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

功能说明

我们想要从将原始的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)
    })

大力pig

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue 17 - 用过滤器实现时间戳转换

Vue.js 中的过滤器（Filter）是一种简单的功能，用于将输出数据按照特定的方式进行格式化。过滤器可以在输出数据之前对其进行转换，以便更好地呈现给用户。Vue.js 的过滤器使用方式非常简单，只需要在模板中使用管道符将数据传递到过滤器中，然后在过滤器中对数据进行处理，最后将处理后的数据返回即可。在上面的例子中，我们定义了一个名为。
复制链接

扫一扫