vue基本使用--過濾器

全局過濾器

注意：要先創建全局過濾器，在創建vue實例

語法

// 第一個參數表示：過濾器的名稱
// 第二個參數表示：函數，使用過濾器的時候，這個函數中的代碼會被執行
Vue.filter('filterName', function (value) {
  // value 表示要過濾的內容
})

實例：日期過濾

Vue.filter('date', function (input, format = 'yyyy-MM-dd hh:mm:ss'）{
      var o = {
        "M+": input.getMonth() + 1, //月份 
        "d+": input.getDate(), //日 
        "h+": input.getHours(), //小時 
        "m+": input.getMinutes(), //分 
        "s+": input.getSeconds(), //秒 
        "q+": Math.floor((input.getMonth() + 3) / 3), //季度 
        "S": input.getMilliseconds() //毫秒 
      };

      if (/(y+)/.test(format)) format = format.replace(RegExp.$1, (input.getFullYear() + "").substr(4 - RegExp.$1.length));
      // 不夠2位的前面補0
      for (var k in o)
        if (new RegExp("(" + k + ")").test(format)) 
        format = format.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
      return format;
    })

• 使用過濾器

<h1>{{item.time | date('yyyy-MM-dd hh:mm:ss')}}</h1>

局部過濾器

在某一個vue實例的內創建的，只在當前實例中起作用

  // 通過 filters 屬性創建局部過濾器
  // 注意：此處爲 filters
  filters: {
    filterName: function(value, format) {}
  }