vue 將多個(gè)過濾器封裝到一個(gè)文件中的代碼詳解
更新時(shí)間：2020年09月05日 10:31:36 作者：胡興朝
這篇文章主要介紹了vue 將多個(gè)過濾器封裝到一個(gè)文件中實(shí)現(xiàn)方法，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧
在這里只簡單探討關(guān)于如何將vue過濾器封裝到一個(gè)文件當(dāng)中，當(dāng)然可以封裝多個(gè)不同類型的過濾器，然后可以在需要使用過濾器的文件當(dāng)中進(jìn)行復(fù)用，非常的方便。
1.
首先是文件結(jié)構(gòu)，首先涉及到 filters.vue (引用過濾器的文件)
文件代碼：
<template>
<div class="chart-container">
<ul>
<li v-for="texts in text" >{{texts | MoneyFormat}}</li>
</ul>
</div>
</template>
<script>
import filter from '../filters/index'
export default {
data() {
return {
text: ['holle','sdfs','fuck']
};
},
};
</script>
然后是用來封裝過濾器的文件 filters下的index.js文件：
文件代碼：
//vue定義全局過濾器
//第一個(gè)過濾器：用來將單詞的首字母變成大寫
let MoneyFormat = value => {
if (value) {
let str = value.toString();
//獲取英文，以空格分組把字符串轉(zhuǎn)為數(shù)組，遍歷每一項(xiàng)，第一項(xiàng)轉(zhuǎn)為大寫字母
let newArr = str.split(" ").map(ele => {
console.log(ele.slice(1))
return ele.charAt(0).toUpperCase() + ele.slice(1)
});
return newArr.join(" ")
}
}
//第二個(gè)過濾器：用來將字符串'22'添加到字母后面
let timeFilter = function (value) {
return value + "22"
}
//暴露這兩個(gè)過濾器
export { MoneyFormat,timeFilter }
最后就是在main.js文件當(dāng)中引入全局過濾器：
文件代碼：
//全局過濾器
import * as filters from './filters/index'
Object.keys(filters).forEach(key => {
Vue.filter(key, filters[key])
})
2.
最后附上文件結(jié)構(gòu)圖：
總結(jié)
到此這篇關(guān)于vue 將多個(gè)過濾器封裝到一個(gè)文件中的文章就介紹到這了,更多相關(guān)vue過濾器封裝文件中內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了Vue組件和Route的生命周期的相關(guān)知識(shí),需要的朋友可以參考下2018-02-02
vue實(shí)現(xiàn)錨點(diǎn)跳轉(zhuǎn)scrollIntoView()使用案例
這篇文章主要介紹了vue實(shí)現(xiàn)錨點(diǎn)跳轉(zhuǎn)scrollIntoView()使用案例，文中結(jié)合實(shí)例代碼介紹了vue錨點(diǎn)跳轉(zhuǎn)的三種方式(頁內(nèi)跳轉(zhuǎn)，跨頁跳轉(zhuǎn)，函數(shù)跳轉(zhuǎn)),需要的朋友可以參考下2023-07-07
element-ui 插槽自定義樣式居中效果實(shí)現(xiàn)思路
這篇文章主要介紹了element-ui 插槽自定義樣式居中效果,簡單來講實(shí)現(xiàn)思路是通過template標(biāo)簽可理解為一個(gè)內(nèi)嵌組件,寬高重新定義,可在自定義內(nèi)容外層套一層盒子,讓盒子占滿所有空間,再使用flex讓內(nèi)部元素居中,需要的朋友可以參考下2024-07-07
使用VUE實(shí)現(xiàn)一鍵復(fù)制內(nèi)容功能
這篇文章主要介紹了使用VUE實(shí)現(xiàn)一鍵復(fù)制內(nèi)容功能,功能就是當(dāng)我們點(diǎn)擊復(fù)制按鈕時(shí)，會(huì)提示“復(fù)制成功”，這樣復(fù)制的內(nèi)容就可以在其他地方使用了，感興趣的朋友可以學(xué)習(xí)一下2023-04-04
這篇文章主要介紹了Vue?Cli中的環(huán)境變量和模式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
本篇文章主要介紹了weex里Vuex state使用storage持久化詳解，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2017-09-09
這篇文章主要介紹了vue如何自定義事件傳參，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
vue前端自適應(yīng)布局實(shí)現(xiàn)教程(一步到位所有自適應(yīng))
?自適應(yīng)布局是一種根據(jù)不同的設(shè)備屏幕分辨率進(jìn)行布局的方式,它為不同的屏幕分辨率定義了不同的布局,下面這篇文章主要給大家介紹了關(guān)于vue前端自適應(yīng)布局實(shí)現(xiàn)的相關(guān)資料,需要的朋友可以參考下2024-08-08
Vue3中如何使用v-model高級(jí)用法參數(shù)綁定傳值
本文給大家介紹Vue3中使用v-model高級(jí)用法參數(shù)綁定傳值的相關(guān)知識(shí),包括單個(gè)輸入框傳值和多個(gè)輸入框傳值,一個(gè)組件接受多個(gè)v-model值,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友參考下吧2023-10-10
vue3使用iframe嵌入ureport2設(shè)計(jì)器,解決預(yù)覽時(shí)NullPointerException異常問題
這篇文章主要介紹了vue3使用iframe嵌入ureport2設(shè)計(jì)器,解決預(yù)覽時(shí)NullPointerException異常問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10