vue filters过滤器的统一封装_vue3怎么使用filter统一处理图片前缀-优快云博客

本文链接：https://blog.youkuaiyun.com/pyp_demon/article/details/111715557

博客介绍了统一封装规则，涉及的文件有 src/utils/index.js、src/filters/index.js 和 src/main.js ，这些文件与信息技术开发相关。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、src文件夹下创建 filters文件夹，然后再filters文件夹下创建index.js
即：src/filters/index.js

2、在main.js中引入src/filters/index.js文件，并在下方遍历调用filters中的方法，使用VUE.filters
切记：将遍历代码写在new VUE()上方

3、在src/utils文件夹下的文件中创建各种工具类方法

4、在src/filters/index.js中引入utils中的方法进行调用

src/utils/index.js

/**
 * 数字/浮点数保留n位小数点
 * @param {*} val 值
 * @param {*} num 位数
 */
export const numToFixed = (val = 0, num = 2) => {
  val = Number(val)
  val = isNaN(val) ? 0 : val
  return val.toFixed(num)
}

src/filters/index.js

import * as index from '../utils/index'

/**
 * 数字/浮点数保留n位小数点
 * @param {*} val 值
 * @param {*} num 位数
 */
export const numToFixed = (val = 0, num = 2) => index.numToFixed(val, num)

src/main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import * as filters from './filters'  // 点1

Vue.config.productionTip = false

Object.keys(filters).forEach(key => { Vue.filter(key, filters[key]) }) // 点2，必须在new Vue之前

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})