vueのフィルタフィルタ

一、vueフィルタの概念
+コンセプト:Vue.jsではフィルタをカスタマイズできます.**は一般的なテキストフォーマット**として使用できます.+フィルタは、*mustache補間とv-bind式**の2つの場所で使用できます.+フィルタはJavaScript式の末尾に追加され、「パイプ」記号で示されます.+出力する前に、最后の包装の処理をします.+例:list|フィルタ
二、プライベートフィルタ
プライベートfilters定義:プライベートローカルフィルタは、現在のVMオブジェクトが制御するView領域でのみ使用できます.

filters: { 
    //           pattern=""         ，    
    dataFormat(input, pattern = "") { 
      var dt = new Date(input);
      //      
      var y = dt.getFullYear();
      var m = (dt.getMonth() + 1).toString().padStart(2, '0');
      var d = dt.getDate().toString().padStart(2, '0');

      //              ，      ，   yyyy-mm-dd，       - - 
      //   ，      - -   ： ： 
      if (pattern.toLowerCase() === 'yyyy-mm-dd') {
        return `${y}-${m}-${d}`;
      } else {
        //      
        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}`;
      }
    }
  }

HTML要素:

{{item.ctime | dataFormat('yyyy-mm-dd')}}

注意:補足ビット数:ES 6の文字列の新しいメソッドStringを使用します.prototype.padStart(maxLength,fillString=')またはString.prototype.padEnd(maxLength,fillString=')は文字列を埋め込む.
三、グローバルフィルタ
グローバル:すべてのvueが使用できます.

//          
Vue.filter('dataFormat', function (input, pattern = '') {
  var dt = new Date(input);
  //      
  var y = dt.getFullYear();
  var m = (dt.getMonth() + 1).toString().padStart(2, '0');
  var d = dt.getDate().toString().padStart(2, '0');
  //              ，      ，   yyyy-mm-dd，       - - 
  //   ，      - -   ： ： 
  if (pattern.toLowerCase() === 'yyyy-mm-dd') {
    return `${y}-${m}-${d}`;
  } else {
    //      
    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}`;
  }
});

注意:ローカルとグローバルの2つの名前が同じフィルタがある場合、ローカルフィルタはグローバルフィルタよりも優先的に呼び出されます.