Vue 过滤器的使用

• 全局过滤器

  <div id="app">
  <h3>全局过滤器：{{ dateTime | dateFormat }}</h3>
  </div>

  Vue.filter('dateFormat', function(dateStr){
  let dateTime = new Date(dateStr);
  let year = dateTime.getFullYear();
  let month = dateTime.getMonth().toString().padStart(2, '0');
  let day = dateTime.getDay().toString().padStart(2, '0');
  let hour = dateTime.getHours().toString().padStart(2, '0');
  let min = dateTime.getMinutes().toString().padStart(2, '0');
  let sec = dateTime.getSeconds().toString().padStart(2, '0');
  return `${year}-${month}-${day} ${hour}:${min}:${sec}`;
  });

• 局部过滤器

  <div id="app">
  <h3>私有过滤器：{{ dateTime | dateFormat2 }}</h3>
  </div>

  var app = new Vue({
  el: '#app',
  data: {
  dateTime: new Date()
  },
  methods: {
  fun: function(){
  
  }
  },
  filters: {
  dateFormat2: function (dateStr) {
  let dateTime = new Date(dateStr);
  let year = dateTime.getFullYear();
  let month = dateTime.getMonth().toString().padStart(2, '0');
  let day = dateTime.getDay().toString().padStart(2, '0');
  let hour = dateTime.getHours().toString().padStart(2, '0');
  let min = dateTime.getMinutes().toString().padStart(2, '0');
  let sec = dateTime.getSeconds().toString().padStart(2, '0');
  return `${year}-${month}-${day} ${hour}:${min}:${sec}`;
  }
  }
  })