フィルタフィルタVUE

、VUEフィルタの概念

+コンセプト：Vue.js **は、それはいくつかの一般的なテキストの書式として使用することができる**、フィルタをカスタマイズすることができます。
**口ひげ補間とvバインド式**：+フィルタは、2つの場所で使用することができます。
; +フィルタが示されている「パイプ」、JavaScript式の末尾に追加されるべき
+出力前に行う、包装プロセスの最後の層。
+たとえば、次のリスト|フィルタ

第二に、プライベートフィルタ

プライベート filters 定義されたメソッド：プライベートローカルフィルタは、現在のVMオブジェクトビューコントロールの領域で使用することができます

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要素：

<td>{{item.ctime | dataFormat('yyyy-mm-dd')}}</td>

注：補数の桁：新しいアプローチString.prototype.padStart ES6文字列（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つのローカルおよびグローバル同じ名前のフィルタ時間があるとき、すなわち、近接の原則に呼び出されます：グローバルフィルター上のローカルフィルタの優先順位が呼び出されます！

おすすめ