Vue封装全局过滤器Filters的步骤


Posted in Javascript onSeptember 16, 2020

(PS:本文代码在vue-cli3构建的基础vue项目之上进行编写:vue create my-project)

在前后端分离的项目中,经常会有后台返回的数据需要经过处理才能显示到页面上的场景。

使用最多的场景就是日期/时间、数字、字符串的格式化处理,实际业务中可能还有更复杂的数据处理逻辑。

下面就拿封装全局的处理数字和字符串的 filter 来展示 vue 如何 封装全局filter 并统一处理。

一、定义/封装过滤器

在 src目录 下新建 filters目录 用来专门存放全局过滤器,如果项目的过滤器过多,那么就要按类型分类。

如果项目需要前台处理的数据不是太多,那么就在 filters目录 下新建一个 index.js 来存放所有的过滤器就足够了。

index.js代码如下:

// 封装过滤器
// 过滤器的声明可以有下列多种写法

/**
 * Number formatting by unit
 * like 10000 => 10k
 * @param {number} num
 * @param {number} digits
 * @return {string}
 */
function numberFormatter(num, digits) {
 const si = [
  { value: 1e18, symbol: "E" },
  { value: 1e15, symbol: "P" },
  { value: 1e12, symbol: "T" },
  { value: 1e9, symbol: "G" },
  { value: 1e6, symbol: "M" },
  { value: 1e3, symbol: "k" }
 ];
 for (let i = 0; i < si.length; i++) {
  if (num >= si[i].value) {
   return (num / si[i].value + 0.1).toFixed(digits).replace(/\.0+$|(\.[0-9]*[1-9])0+$/, '$1') + si[i].symbol
  }
 }
 return num.toString();
}

/**
 * Number formatting by thousand
 * like 10000 => "10,000"
 * @param {number} num
 * @return {string}
 */
const toThousandFilter = function(num) {
 return (+num || 0).toString().replace(/^-?\d+/g, m => m.replace(/(?=(?!\b)(\d{3})+$)/g, ','))
};

/**
 * Upper case first char
 * like "wenyuan" => "Wenyuan"
 * @param {string} string
 * @return {string}
 */
const uppercaseFirst = string => {
 return string.charAt(0).toUpperCase() + string.slice(1);
};

export default {
 numberFormatter,
 toThousandFilter,
 uppercaseFirst
};

二、注册过滤器

然后在 main.js 中引入注册即可使用:

import filters from "./filters"; // global filters

// register global utility filters
Object.keys(filters).forEach(key => {
 Vue.filter(key, filters[key]);
});

Vue封装全局过滤器Filters的步骤

三、在组件内使用写好的过滤器

在组件中使用:

<template>
 <div class="home">
  <img alt="Vue logo" src="../assets/logo.png"/>
  <h1>score:{{ score | numberFormatter }}</h1>
  <h1>score:{{ score | toThousandFilter }}</h1>
  <h1>username:{{ username | uppercaseFirst }}</h1>
 </div>
</template>

<script>
export default {
 name: "home",
 components: {},
 data() {
  return {
   score: 1200000,
   username: "wenyuan"
  };
 }
};
</script>

四、效果

Vue封装全局过滤器Filters的步骤

五、可能的报错与注意点

在 main.js 中,要先定义过滤器, 再新建 vue 实例,否则会报Failed to resolve filter: xxx的错误。

以上就是Vue封装全局过滤器Filters的步骤的详细内容,更多关于vue封装过滤器的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
js left,right,mid函数
Jun 10 Javascript
jquery自动完成插件(autocomplete)应用之PHP版
Dec 15 Javascript
基于jQuery实现表格的查看修改删除
Aug 01 Javascript
JavaScript实战之菜单特效
Aug 16 Javascript
js中用cssText设置css样式的简单方法
Sep 19 Javascript
JS返回只包含数字类型的数组实例分析
Dec 16 Javascript
ionic2打包android时gradle无法下载的解决方法
Apr 05 Javascript
JavaScript对象的浅拷贝与深拷贝实例分析
Jul 25 Javascript
JavaScript文本特效实例小结【3个示例】
Dec 22 Javascript
使用webpack构建应用的方法步骤
Mar 04 Javascript
Node.JS获取GET,POST数据之queryString模块使用方法详解
Feb 06 Javascript
JavaScript函数Call、Apply原理实例解析
Feb 17 Javascript
Vue父子组件传值的一些坑
Sep 16 #Javascript
vue-cli3项目打包后自动化部署到服务器的方法
Sep 16 #Javascript
vue项目打包后提交到git上为什么没有dist这个文件的解决方法
Sep 16 #Javascript
vue 自定指令生成uuid滚动监听达到tab表格吸顶效果的代码
Sep 16 #Javascript
vue中选中多个选项并且改变选中的样式的实例代码
Sep 16 #Javascript
vue实现div可拖动位置也可改变盒子大小的原理
Sep 16 #Javascript
Vue项目打包编译优化方案
Sep 16 #Javascript
You might like
自定义PHP分页函数
2006/10/09 PHP
PHP整数取余返回负数的相关解决方法
2014/05/15 PHP
phpStorm+XDebug+chrome 配置详解
2019/04/01 PHP
跟着JQuery API学Jquery 之三 筛选
2010/04/09 Javascript
jquery中this的使用说明
2010/09/06 Javascript
通过Javascript创建一个选择文件的对话框代码
2012/06/16 Javascript
JS中prototype关键字的功能介绍及使用示例
2013/07/21 Javascript
extjs两个tbar问题探讨
2013/08/08 Javascript
sliderToggle在写jquery的计时器setTimeouter中不生效
2014/05/26 Javascript
javascript中hasOwnProperty() 方法使用指南
2015/03/09 Javascript
js实现页面跳转的几种方法小结
2016/05/16 Javascript
Javascript中的迭代、归并方法详解
2016/06/14 Javascript
JS实现上传图片的三种方法并实现预览图片功能
2017/07/14 Javascript
promise处理多个相互依赖的异步请求(实例讲解)
2017/08/03 Javascript
postman+json+springmvc测试批量添加实例
2018/03/31 Javascript
JavaScript的Object.defineProperty详解
2018/07/09 Javascript
Vue中控制v-for循环次数的实现方法
2018/09/26 Javascript
使用 Vue 实现一个虚拟列表的方法
2019/08/20 Javascript
基于小程序请求接口wx.request封装的类axios请求
2020/07/02 Javascript
vue项目页面嵌入代码块vue-prism-editor的实现
2020/10/30 Javascript
用python实现的去除win下文本文件头部BOM的代码
2013/02/10 Python
python使用PyFetion来发送短信的例子
2014/04/22 Python
python MySQLdb Windows下安装教程及问题解决方法
2015/05/09 Python
selenium+python 去除启动的黑色cmd窗口方法
2018/05/22 Python
PyTorch 解决Dataset和Dataloader遇到的问题
2020/01/08 Python
Python 高效编程技巧分享
2020/09/10 Python
Python3获取cookie常用三种方案
2020/10/05 Python
Python抓包并解析json爬虫的完整实例代码
2020/11/03 Python
幼儿园大班新学期寄语
2014/01/18 职场文书
外贸采购员岗位职责
2014/03/08 职场文书
老干部工作先进事迹
2014/08/17 职场文书
电工实训报告总结
2014/11/05 职场文书
2014年财务经理工作总结
2014/12/08 职场文书
质量整改通知单
2015/04/21 职场文书
可可西里观后感
2015/06/08 职场文书
html实现随机点名器的示例代码
2021/04/02 Javascript