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>

猜你喜欢

转载自blog.csdn.net/wakaka112233/article/details/106386545
今日推荐