1. 程式人生 > >vue學習(十六) 自定義私有過濾器 ES6字符串新方法 填充字符串

vue學習(十六) 自定義私有過濾器 ES6字符串新方法 填充字符串

pad 兩個 fff 調用 method === .get dst nds

<div id="app">
 <p>{{data | formatStr(‘yyyy-MM-dd‘)}}</p></div>

//script
<script>
  //自定義一個私有的過濾器(局部)
  var vm = new Vue({     el:app,     data:{       msg:     },
    method:{},
    filters:{//定義私有過濾器 過濾器有兩個條件 過濾器名稱和處理函數
      formatStr:function(dataStr,pattern){
        var date = new Date(dataStr)
        var y = date.getFullYear()
        // padStart()方法是ES6提供的填充字符串的方法,有兩個參數 第一個是 填充完後字符串的總長度,第二個參數是用什麽來填充字符串
        // 這裏要做的是 月份 和 天數 如果是一位的話在前面補上0 比如:2019-02-04
        var m = (date.getMonth()+1).toString().padStart(2,‘0‘)
        var d = (date.getDate()).toString().padStart(2,‘0‘)
        if(pattern.toLowerCase()===‘yyyy-MM-dd‘){
          return `${y}-${m}-${d}`
        }else{
          var hh = date.getHours()
          var mm = date.getMinutes()
          var ss = date.getScends()
          return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
        }
      }
    }   })
</script>

註意:過濾器調用的時候,采用的是就近原則,如果私有過濾器和全局過濾器名稱一致了,這時候優先調用私有過濾器

vue學習(十六) 自定義私有過濾器 ES6字符串新方法 填充字符串