vueグローバルフィルタ構成

1780 ワード

1つのフィルタがプロジェクトで複数回使用する必要がある場合がある、このフィルタをグローバルフィルタとして定義することができ、グローバルフィルタはmainにある.jsで構成します.時間フィルタを例にとると、ローカルフィルタとして次のように書きます.
filters: {
  timeForm(val) {

        if (typeof (value) == "undefined" || value === null) return "";

        let date = new Date(value);
        var y = date.getFullYear();
        var m = date.getMonth() + 1;
        var d = date.getDate();
        if (isNaN(y) && y != 0) {
          y = " ";
        }
        if (isNaN(m) && m != 0) {
          m = " ";
        } else {
          (m < 10 ? "0" + m : m);
        }
        if (isNaN(d) && d != 0) {
          d = " ";
        } else {
          (d < 10 ? "0" + d : d);
        }

        return y + "-" + m + "-" + d + " " + date.toTimeString().substr(0, 5);
}

グローバルフィルタに設定します
Vue.filter('timeForm', function (value) {
  if (typeof (value) == "undefined" || value === null) return "";

  let date = new Date(value);
  var y = date.getFullYear();
  var m = date.getMonth() + 1;
  var d = date.getDate();
  if (isNaN(y) && y != 0) {
    y = " ";
  }
  if (isNaN(m) && m != 0) {
    m = " ";
  } else {
    (m < 10 ? "0" + m : m);
  }
  if (isNaN(d) && d != 0) {
    d = " ";
  } else {
    (d < 10 ? "0" + d : d);
  }
  return y + "-" + m + "-" + d + " " + date.toTimeString().substr(0, 5);
});
var timeForm = Vue.filter('timeForm');

直接定義:Vue.フィルタ('timeForm',function(value){//フィルタコード}
次にフィルタを定義:var timeForm=Vue.filter('timeForm')   
使用する場合はローカルフィルタと同様に使用し、直接{value|filter}}でよい