vue.js中封裝全域性filter

張旭超發表於2021-12-29
Vue.js封裝Filter

建立filters資料夾，裡面建立filters.js檔案，用來定義全域性filter
image.png

filters.js

let filterOne = (value) => {
  return value * 10
}
let filterTwo = (value, pm) => {
  return value * pm
}
export default {
  filterOne,
  filterTwo
}

main.js

import filters from './filters/filters.js'
for (let value in filters) {
  // value是filter名稱（字串）
  // filters[value] 物件裡面的某個元素，就是filters中定義的方法
  Vue.filter(value, filters[value])
}

這樣就全域性定義了所有的filter，就可以在介面中使用了。

年齡：{{ age | filterOne | filterTwo(0.5) }}

相關文章