VUE过滤器,时间格式化

1. VUE过滤器

  • 使用vue的过滤器:做输出前的最后一步的处理
  • Vue.js允许自定义过滤器,可被用于一些常见的文本格式化
  • 过滤器可以用在两个地方:mustache插值(即{{ }})、v-bind表达式
  • 分为全局和私有过滤器
  • 两者用法相同,都是{{ name | 过滤器的名字 }},写法上有区别

1.1 全局过滤器

  • 写在vue实例外面,且必须先定义过滤器,再创建vue实例
  • vue过滤器的写法 :Vue.filter('过滤器名称',function(data))

1.2 私有过滤器

  • 写在vue实例内部的filters中
   var vm = new Vue({
       el:"#app",
       data() {
           return {
               date:new Date()
           }
       },
       filters:{
           // 定义私有过滤器
           dateFormate : function(dateStr){
               return 'ssss'+dataStr;
           }
       }
   })

1.3 注意:

  • 过滤器的第一个参数是使用时传递过来了,管道符“ | ”前面的值就是第一个参数,已经被规定死
  • 过滤器采用就近原则,私有优先级大于全局

2. 时间格式化代码

  • str.padStart(2,‘0’)) 的意思是,用‘0’在str最前面来填充str,使得长度达到2;
  • 对应的还有 padEnd()
<body>
    
    <div id="app">
        <h2>{{ date | dateFormate()}}h2>
    div>

<script>
    Vue.filter("dateFormate",function(dataStr){
        var dt =new Date(dataStr)

        var y =dt.getFullYear()
        var m = (dt.getMonth()+1).toString.padStart(2,'0')
        var d = dt.getDay().toString.padStart(2,'0')

        var hh = dt.getHours().toString.padStart(2,'0')
        var mm =dt.getMinutes().toString.padStart(2,'0')
        var ss = dt.getSeconds().toString.padStart(2,'0')

        return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;

    })


    var vm = new Vue({
        el:"#app",
        data() {
            return {
                date:new Date()
            }
        },
    })
script>

你可能感兴趣的:(vue)