詳解VUE2.X過濾器的使用方法
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 axios庫避免重復(fù)發(fā)送請(qǐng)求的示例介紹
Axios是一個(gè)基于promise的HTTP庫，可以用在瀏覽器和node.js中。axios是目前最優(yōu)秀的HTTP請(qǐng)求庫之一,我們封裝axios請(qǐng)求也是為了讓代碼看的更加清晰,后期好維護(hù)2023-02-02
vue+element UI中如何給指定日期添加標(biāo)記
這篇文章主要介紹了vue+element UI中如何給指定日期添加標(biāo)記問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-02-02
vuex分模塊后,實(shí)現(xiàn)獲取state的值
這篇文章主要介紹了vuex分模塊后,實(shí)現(xiàn)獲取state的值，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-07-07
解決vue做詳情頁跳轉(zhuǎn)的時(shí)候使用created方法 數(shù)據(jù)不會(huì)更新問題
這篇文章主要介紹了解決vue做詳情頁跳轉(zhuǎn)的時(shí)候使用created方法 數(shù)據(jù)不會(huì)更新問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-07-07
vue 項(xiàng)目打包時(shí)樣式及背景圖片路徑找不到的解決方式
今天小編就為大家分享一篇vue 項(xiàng)目打包時(shí)樣式及背景圖片路徑找不到的解決方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11
詳解element-ui日期時(shí)間選擇器的日期格式化問題
這篇文章主要介紹了詳解element-ui日期時(shí)間選擇器的日期格式化問題，本文用到了DateTimePicker來選擇日期時(shí)間，但是在將數(shù)據(jù)傳回后臺(tái)的過程中遇到了一些令人頭疼的問題，有興趣的一起來了解一下2019-04-04
如何利用vue-cli監(jiān)測(cè)webpack打包與啟動(dòng)時(shí)長
這篇文章主要給大家介紹了關(guān)于如何利用vue-cli監(jiān)測(cè)webpack打包與啟動(dòng)時(shí)長的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-02-02
這篇文章主要介紹了使用webpack搭建vue環(huán)境的教程,本文通過實(shí)例的形式給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-12-12
vue3?組件與API直接使用的方法詳解(無需import)
這篇文章主要介紹了vue3?組件與API直接使用的方法(無需import)，主要包括vue3自動(dòng)導(dǎo)入和API的自動(dòng)引入問題，本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-09-09
vue.js-div滾動(dòng)條隱藏但有滾動(dòng)效果的實(shí)現(xiàn)方法
下面小編就為大家分享一篇vue.js-div滾動(dòng)條隱藏但有滾動(dòng)效果的實(shí)現(xiàn)方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-03-03