在這裡只簡單探討關於如何將vue過濾器封裝到一個檔案當中，當然可以封裝多個不同型別的過濾器，然後可以在需要使用過濾器的檔案當中進行復用，非常的方便。
1.
首先是檔案結構，首先涉及到 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();
  //獲取英文，以空格分組把字串轉為陣列，遍歷每一項，第一項轉為大寫字母
  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.

最後附上檔案結構圖：

總結

到此這篇關於vue 將多個過濾器封裝到一個檔案中的文章就介紹到這了,更多相關vue過濾器封裝檔案中內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！