zoukankan      html  css  js  c++  java
  • Vue---定义全局过滤器---时间格式化

    // 1. 导入Vue
    import Vue from 'vue'
    // 导入格式化时间的模块
    import moment from 'moment'
    
    // 定义全局的时间过滤器
    Vue.filter('dateFormat', function (dateStr, formatStr = 'YYYY-MM-DD HH:mm:ss') {
      // 在过滤器的处理函数中,最后,必须 return 一个东西,这样,才是一个合法的过滤器
      return moment(dateStr).format(formatStr)
    })

    使用

      <span>发表时间:{{ item.add_time | dateFormat }}</span>

      也可以自定义:{{ item.add_time | dateFormat('YYYY-MM-DD') }}

    ## 定义全局的过滤器来格式化时间字符串
     1. 经过分析,整个项目中,许多组件都需要格式化时间,因此,推荐定义为全局的时间过滤器;
     2. 定义全局过滤器的语法:`Vue.filter('dateFormat', function(dataStr){})`
     3. 调用过滤器的语法:`<span>{{ item.add_time | dateFormat }}</span>`
     4. 这个时间过滤器,如何去格式化时间呢?比较方便的方式,是借助与第三方的`moment`插件
     5. 这个全局过滤器,定义到哪个文件中呢?
     6. 在设计时间过滤器的时候,为了提高用户体验度(可能有的用户想要 最全的`年-月-日 时:分:秒`, 有的用户只想要`YYYY-MM-DD`),此时,我们可以为过滤器提供一个可选的 格式字符串;
  • 相关阅读:
    Scala之eq,equals,==的区别
    Spark Streaming流计算特点及代码案例
    刷题50—水壶问题
    刷题49(力扣3道题)
    刷题48——最长回文串
    刷题47——矩形重叠
    刷题46——拼写单词
    刷题45(力扣两道题)
    刷题44——岛屿的最大面积
    刷题43——最长上升子序列
  • 原文地址:https://www.cnblogs.com/fdxjava/p/11634612.html
Copyright © 2011-2022 走看看