vue filters过滤器的统一封装「建议收藏」

全栈程序员站长

发布于 2022-08-31 15:19:54

2160

发布于 2022-08-31 15:19:54

大家好，又见面了，我是你们的朋友全栈君。

统一封装规则

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/>'
})

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/143279.html原文链接：https://javaforall.cn

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022年5月2，如有侵权请联系 cloudcommunity@tencent.com 删除

javascript