Vue学习笔记25--过滤器(日期格式化)

日期格式化

日期格式化插件： https://www.bootcdn.cn/

moment.js、day.js(轻量级moment.js)

插件用法：双击day.js==>复制链接并访问==》另存为dayjs.min==》项目中引用

https://github.com/iamkun/dayjs/blob/dev/docs/zh-cn/README.zh-CN.md

过滤器总结：

定义：对要显示的数据进行特定格式化后再进行显示——适用于一些简单逻辑的处理。

语法：

注册过滤器：Vue.filter(name,callback) 或 new Vue{filters:{}}
使用过滤器：{{xxx|过滤器1|过滤器N}} 或 v-bind:属性="xxx|过滤器"

备注：

过滤器也可以接受额外参数、多个过滤器也可以串联
并没有改变原本的数据，是产生新的对应的数据

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>过滤器</title>
  <script type="text/javascript" src="../Js/vue.js"></script>
  <script type="text/javascript" src="../Js/dayjs.min.js"></script>
</head>
<!-- 日期格式化插件 https://www.bootcdn.cn/
  moment.js、day.js(轻量级moment.js)
 -->

<body>
  <div id="root">
    <h2>时间格式化：</h2>
    <hr>
    <h3>时间戳现在是：{{time}}</h3>
    <h3>computed格式化时间是：{{formatTime}}</h3>
    <h3>methods格式化时间是：{{getFormatTime()}}</h3>
    <h3>过滤器实现格式化时间是：{{time|filTimeFormater}}</h3>
    <h3>过滤器实现格式化时间是：{{time|filTimeFormater()}}</h3>
    <h3>过滤器实现格式化时间是：{{time|filTimeFormater2('YYYY-MM-DD HH:mm:ss')}}</h3>
    <h3>过滤器实现格式化时间是：{{time|filTimeFormater2('YYYY-MM-DD')}}</h3>
    <h3>过滤器实现格式化时间是：{{time|filTimeFormater3('YYYY-MM-DD')}}</h3>
    <h3>过滤器实现格式化时间是：{{time|filTimeFormater3()}}</h3>
    <h3>过滤器实现格式化时间是：{{time|filGetYear}}</h3>
    <hr>
    <!-- 完成第一个过滤器后，继续串联进行第二个过滤器
      不能把过滤器和方法或计算属性串联哦
     -->
    <h3>多过滤器串联格式化：{{time|filTimeFormater3|filGetYear2}}</h3>
    <hr>

  </div>
  <div id="root2">
    <h3>使用局部过滤器会失效，控制台会出错哦：{{msg|filGetYear2}}</h3>
    <hr>
    <h3>全局过滤器来了:{{msg|mySlice}}</h3>
  </div>
</body>

</html>
<script type="text/javascript">
  Vue.config.productionTip = false
  // 全局过滤器
  Vue.filter('mySlice', function (value) {
    return value.slice(0, 4)//字符串截取
  })

  const vm = new Vue({
    el: '#root',
    data: {
      time: Date.now(),
      errorInfo: '看看，提示信息来喽'
    },
    computed:
    {
      formatTime () {
        return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss')
      },
    },
    methods: {
      getFormatTime () {
        // return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss')
        return dayjs(Date.now()).format('YYYY-MM-DD HH:mm:ss')
      },
    },
    // 在vm中的局部过滤器
    filters: {
      filTimeFormater (value) {
        return dayjs(value).format('YYYY-MM-DD HH:mm:ss')
      },
      // 默认第一个入参为time--即过滤器本身的值
      filTimeFormater2 (value, paraStr) {
        return dayjs(value).format(paraStr)
      },
      // 过滤器可设置默认入参
      filTimeFormater3 (value, paraStr = 'YYYY-MM-DD HH:mm:ss') {
        return dayjs(value).format(paraStr)
      },
      filGetYear (val, str = 'YYYY') {
        return dayjs(val).format(str)
      },
      filGetYear2 (val) {
        return val.slice(0, 4)//字符串截取
      },
    },
  })

  new Vue({
    el: '#root2',
    data: {
      msg: '我想死你了',
    },

  })
</script>

posted on 2024-02-29 18:16 sunwugang 阅读(38) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

欢迎莅临 SUN WU GANG 的园子！！！

公告