vue 將多個(gè)過(guò)濾器封裝到一個(gè)文件中的代碼詳解
更新時(shí)間：2020年09月05日 10:31:36 作者：胡興朝
這篇文章主要介紹了vue 將多個(gè)過(guò)濾器封裝到一個(gè)文件中實(shí)現(xiàn)方法，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧
在這里只簡(jiǎn)單探討關(guān)于如何將vue過(guò)濾器封裝到一個(gè)文件當(dāng)中，當(dāng)然可以封裝多個(gè)不同類(lèi)型的過(guò)濾器，然后可以在需要使用過(guò)濾器的文件當(dāng)中進(jìn)行復(fù)用，非常的方便。
1.
首先是文件結(jié)構(gòu)，首先涉及到 filters.vue (引用過(guò)濾器的文件)
文件代碼：
<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>
然后是用來(lái)封裝過(guò)濾器的文件 filters下的index.js文件：
文件代碼：
//vue定義全局過(guò)濾器
//第一個(gè)過(guò)濾器：用來(lái)將單詞的首字母變成大寫(xiě)
let MoneyFormat = value => {
if (value) {
let str = value.toString();
//獲取英文，以空格分組把字符串轉(zhuǎn)為數(shù)組，遍歷每一項(xiàng)，第一項(xiàng)轉(zhuǎn)為大寫(xiě)字母
let newArr = str.split(" ").map(ele => {
console.log(ele.slice(1))
return ele.charAt(0).toUpperCase() + ele.slice(1)
});
return newArr.join(" ")
}
}
//第二個(gè)過(guò)濾器：用來(lái)將字符串'22'添加到字母后面
let timeFilter = function (value) {
return value + "22"
}
//暴露這兩個(gè)過(guò)濾器
export { MoneyFormat,timeFilter }
最后就是在main.js文件當(dāng)中引入全局過(guò)濾器：
文件代碼：
//全局過(guò)濾器
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è)過(guò)濾器封裝到一個(gè)文件中的文章就介紹到這了,更多相關(guān)vue過(guò)濾器封裝文件中內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vuex?store?緩存存儲(chǔ)原理，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
Vant的Tabbar標(biāo)簽欄引入自定義圖標(biāo)方式
這篇文章主要介紹了Vant的Tabbar標(biāo)簽欄引入自定義圖標(biāo)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了Vue依賴(lài)收集引發(fā)的問(wèn)題，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
這篇文章給大家詳細(xì)分析了關(guān)于VUE的常用的相關(guān)指令內(nèi)容，對(duì)此有需要的朋友們可以學(xué)習(xí)下。2018-08-08
vue中的.$mount(''#app'')手動(dòng)掛載操作
這篇文章主要介紹了vue中.$mount('#app')手動(dòng)掛載操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09
Vue iview-admin框架二級(jí)菜單改為三級(jí)菜單的方法
這篇文章主要介紹了Vue iview-admin框架二級(jí)菜單改為三級(jí)菜單的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-07-07
vue router-link下劃線和顏色問(wèn)題及解決
這篇文章主要介紹了vue router-link下劃線和顏色問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
vue Nprogress進(jìn)度條功能實(shí)現(xiàn)常見(jiàn)問(wèn)題
這篇文章主要介紹了vue Nprogress進(jìn)度條功能實(shí)現(xiàn),NProgress是頁(yè)面跳轉(zhuǎn)是出現(xiàn)在瀏覽器頂部的進(jìn)度條，本文通過(guò)實(shí)例代碼給大家講解，需要的朋友可以參考下2021-07-07
element?el-tree折疊收縮的實(shí)現(xiàn)示例
本文主要介紹了element?el-tree折疊收縮的實(shí)現(xiàn)示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
斗魚(yú)直播是比較火的直播視頻，想必大家都看過(guò)吧。這篇文章主要介紹了Vue-cli-webpack搭建斗魚(yú)直播步驟詳解,需要的朋友可以參考下2017-11-11