詳解VUE2.X過濾器如何使用

本文主要介紹了詳解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很重要，如果沒有，過濾器將無法使用。

最後就是在p中的使用了。非常簡單。如下：

上面的change就是篩選器。 item.tab將tab的值傳給change過濾器自動轉換。你可以在common.js中寫更多的濾鏡或其他方法。使用方法都是一樣的。

你也可以直接將篩選器寫在vue檔案中。就寫在filters裡面：

相關推薦：

#實例詳解jQuery中過濾器的基本用法

詳解Angularjs篩選器實作動態搜尋與排序功能

JQuery,選擇器/篩選器/效能最佳化

以上是詳解VUE2.X過濾器如何使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！