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