詳解VUE2.X過濾器的使用方法
更新時(shí)間：2018年01月11日 14:49:01 作者：woxindead
本篇文章主要介紹了詳解VUE2.X過濾器的使用方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
VUE2.X過濾器的使用方法有幾種，今天講一種，以cnode社區(qū)API為示例，轉(zhuǎn)換tab類型為中文漢字。
首先我們?cè)赼ssets文件夾中新建個(gè)js的文件夾，并新建common.js,然后將過濾器寫在這個(gè)文件中。當(dāng)然你也可以寫在單個(gè)組件中，這個(gè)等下后面說。
/**
* 將tab類型轉(zhuǎn)換成漢字
* @param {String} tab 待轉(zhuǎn)換前的tab值
* @return {String} 轉(zhuǎn)換后的tab中文
*/
export function change (tab) {
switch (tab) {
case 'share':
return '分享'
case 'ask':
return '問答'
case 'job':
return '招牌'
case 'good':
return '精華'
}
}
上面是common.js文件中過濾器。文件如下：
下面在vue文件中引入并使用過濾器：
上面的filters很重要，如果沒有，過濾器將無法使用。
最后就是在div中的使用了。非常簡(jiǎn)單。如下：
上面的change就是過濾器。item.tab將tab的值傳給change過濾器自動(dòng)轉(zhuǎn)換。你可以在common.js中寫更多的過濾器或其他方法。使用方法都是一樣的。
你也可以直接將過濾器寫在vue文件中。就寫在filters里面：
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家介紹了Vue中request.js封裝及調(diào)用示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-09-09
這篇文章主要介紹了vue仿網(wǎng)易云音樂的單頁面應(yīng)用實(shí)例代碼，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-04-04
vue實(shí)現(xiàn)過渡動(dòng)畫Message消息提示組件示例詳解
這篇文章主要為大家介紹了vue實(shí)現(xiàn)過渡動(dòng)畫Message消息提示組件示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
這篇文章主要介紹了vue el-upload 上傳文件格式校驗(yàn)方法,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-11-11
vue3中使用pinia(大菠蘿)狀態(tài)管理倉庫的項(xiàng)目實(shí)踐
本文主要介紹了vue3中使用pinia(大菠蘿)狀態(tài)管理倉庫，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
vue項(xiàng)目input標(biāo)簽checkbox,change和click綁定事件的區(qū)別說明
這篇文章主要介紹了vue項(xiàng)目input標(biāo)簽checkbox,change和click綁定事件的區(qū)別說明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要為大家詳細(xì)介紹了vue移動(dòng)端下拉刷新和上滑加載，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-10-10
下面小編就為大家分享一篇vue.js,ajax渲染頁面的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-02-02
這篇文章主要介紹了淺談vue項(xiàng)目,訪問路徑#號(hào)的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-08-08
vue復(fù)雜表格單元格合并根據(jù)數(shù)據(jù)動(dòng)態(tài)合并方式
這篇文章主要介紹了vue復(fù)雜表格單元格合并根據(jù)數(shù)據(jù)動(dòng)態(tài)合并方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-02-02