VUE2.X過濾器的使用方法

VUE2.X過濾器的使用方法有幾種，今天講一種，以cnode社區API爲示例，轉換tab類型爲中文漢字。
首先咱們在assets文件夾中新建個js的文件夾，並新建common.js,而後將過濾器寫在這個文件中。固然你也能夠寫在單個組件中，這個等下後面說。

/**
* 將tab類型轉換成漢字
* @param {String} tab 待轉換前的tab值
* @return {String}    轉換後的tab中文
*/
export function change (tab) {
  switch (tab) {
    case 'share':
      return '分享'
    case 'ask':
      return '問答'
    case 'job':
      return '招牌'
    case 'good':
      return '精華'
  }
}

上面是common.js文件中過濾器。文件以下：

下面在vue文件中引入並使用過濾器：

上面的filters很重要，若是沒有，過濾器將沒法使用。
最後就是在div中的使用了。很是簡單。以下：

上面的change就是過濾器。item.tab將tab的值傳給change過濾器自動轉換。你能夠在common.js中寫更多的過濾器或其餘方法。使用方法都是同樣的。
你也能夠直接將過濾器寫在vue文件中。就寫在filters裏面：