首頁  >  文章  >  web前端  >  詳解VUE2.X過濾器如何使用

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

小云云
小云云原創
2018-01-13 13:20:001482瀏覽

本文主要介紹了詳解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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn