這篇文章將為大家詳細(xì)講解有關(guān)VUE2.X過(guò)濾器怎么用，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。
創(chuàng)新互聯(lián)公司主營(yíng)寶山網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營(yíng)網(wǎng)站建設(shè)方案,手機(jī)APP定制開(kāi)發(fā),寶山h5重慶小程序開(kāi)發(fā)搭建,寶山網(wǎng)站營(yíng)銷推廣歡迎寶山等地區(qū)企業(yè)咨詢
VUE2.X過(guò)濾器的使用方法有幾種，今天講一種，以cnode社區(qū)API為示例，轉(zhuǎn)換tab類型為中文漢字。
首先我們?cè)赼ssets文件夾中新建個(gè)js的文件夾，并新建common.js,然后將過(guò)濾器寫在這個(gè)文件中。當(dāng)然你也可以寫在單個(gè)組件中，這個(gè)等下后面說(shuō)。
重慶分公司
重慶分公司
/**
* 將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 '問(wèn)答'
case 'job':
return '招牌'
case 'good':
return '精華'
}
}上面是common.js文件中過(guò)濾器。文件如下：
下面在vue文件中引入并使用過(guò)濾器：
上面的filters很重要，如果沒(méi)有，過(guò)濾器將無(wú)法使用。
最后就是在div中的使用了。非常簡(jiǎn)單。如下：
上面的change就是過(guò)濾器。item.tab將tab的值傳給change過(guò)濾器自動(dòng)轉(zhuǎn)換。你可以在common.js中寫更多的過(guò)濾器或其他方法。使用方法都是一樣的。
你也可以直接將過(guò)濾器寫在vue文件中。就寫在filters里面：
關(guān)于“VUE2.X過(guò)濾器怎么用”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。
