vue 將多個過濾器封裝到一個文件中的代碼詳解

更新時間：2020年09月05日 10:31:36 作者：胡興朝

這篇文章主要介紹了vue 將多個過濾器封裝到一個文件中實現(xiàn)方法，本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友參考下吧

在這里只簡單探討關(guān)于如何將vue過濾器封裝到一個文件當(dāng)中，當(dāng)然可以封裝多個不同類型的過濾器，然后可以在需要使用過濾器的文件當(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定義全局過濾器

//第一個過濾器：用來將單詞的首字母變成大寫
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文件當(dāng)中引入全局過濾器：

在這里插入圖片描述

文件代碼：

//全局過濾器
import * as filters from './filters/index'
Object.keys(filters).forEach(key => {
  Vue.filter(key, filters[key])
})

最后附上文件結(jié)構(gòu)圖：

在這里插入圖片描述

總結(jié)

到此這篇關(guān)于vue 將多個過濾器封裝到一個文件中的文章就介紹到這了,更多相關(guān)vue過濾器封裝文件中內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

Vue組件和Route的生命周期實例詳解
這篇文章主要介紹了Vue組件和Route的生命周期的相關(guān)知識,需要的朋友可以參考下
2018-02-02
vue實現(xiàn)錨點跳轉(zhuǎn)scrollIntoView()使用案例
這篇文章主要介紹了vue實現(xiàn)錨點跳轉(zhuǎn)scrollIntoView()使用案例，文中結(jié)合實例代碼介紹了vue錨點跳轉(zhuǎn)的三種方式(頁內(nèi)跳轉(zhuǎn)，跨頁跳轉(zhuǎn)，函數(shù)跳轉(zhuǎn)),需要的朋友可以參考下
2023-07-07
element-ui 插槽自定義樣式居中效果實現(xiàn)思路
這篇文章主要介紹了element-ui 插槽自定義樣式居中效果,簡單來講實現(xiàn)思路是通過template標(biāo)簽可理解為一個內(nèi)嵌組件,寬高重新定義,可在自定義內(nèi)容外層套一層盒子,讓盒子占滿所有空間,再使用flex讓內(nèi)部元素居中,需要的朋友可以參考下
2024-07-07
使用VUE實現(xiàn)一鍵復(fù)制內(nèi)容功能
這篇文章主要介紹了使用VUE實現(xiàn)一鍵復(fù)制內(nèi)容功能,功能就是當(dāng)我們點擊復(fù)制按鈕時，會提示“復(fù)制成功”，這樣復(fù)制的內(nèi)容就可以在其他地方使用了，感興趣的朋友可以學(xué)習(xí)一下
2023-04-04
Vue?Cli中的環(huán)境變量和模式
這篇文章主要介紹了Vue?Cli中的環(huán)境變量和模式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-10-10
weex里Vuex state使用storage持久化詳解
本篇文章主要介紹了weex里Vuex state使用storage持久化詳解，非常具有實用價值，需要的朋友可以參考下
2017-09-09
vue如何自定義事件傳參
這篇文章主要介紹了vue如何自定義事件傳參，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-05-05
vue前端自適應(yīng)布局實現(xiàn)教程(一步到位所有自適應(yīng))
?自適應(yīng)布局是一種根據(jù)不同的設(shè)備屏幕分辨率進(jìn)行布局的方式,它為不同的屏幕分辨率定義了不同的布局,下面這篇文章主要給大家介紹了關(guān)于vue前端自適應(yīng)布局實現(xiàn)的相關(guān)資料,需要的朋友可以參考下
2024-08-08
Vue3中如何使用v-model高級用法參數(shù)綁定傳值
本文給大家介紹Vue3中使用v-model高級用法參數(shù)綁定傳值的相關(guān)知識,包括單個輸入框傳值和多個輸入框傳值,一個組件接受多個v-model值,本文通過實例代碼給大家介紹的非常詳細(xì),需要的朋友參考下吧
2023-10-10
vue3使用iframe嵌入ureport2設(shè)計器,解決預(yù)覽時NullPointerException異常問題
這篇文章主要介紹了vue3使用iframe嵌入ureport2設(shè)計器,解決預(yù)覽時NullPointerException異常問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-10-10