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 相关文章推荐
Javascript 判断函数类型完美解决方案
Sep 02 Javascript
javascript学习笔记(十八) 获得页面中的元素代码
Jun 20 Javascript
利用jQuery实现可以编辑的表格
May 26 Javascript
javascript文本模板用法实例
Jul 31 Javascript
javascript中apply、call和bind的使用区别
Apr 05 Javascript
JavaScript和jquery获取父级元素、子级元素、兄弟元素的方法
Jun 05 Javascript
JS无缝滚动效果实现方法分析
Dec 21 Javascript
Angularjs实现分页和分页算法的示例代码
Dec 23 Javascript
d3.js实现立体柱图的方法详解
Apr 28 Javascript
基于js中的原型(全面讲解)
Sep 19 Javascript
ExtJs整合Echarts的示例代码
Feb 27 Javascript
使用vue-route 的 beforeEach 实现导航守卫(路由跳转前验证登录)功能
Mar 22 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
玩转图像函数库―常见图形操作
2006/09/03 PHP
PHP自动选择 连接本地还是远程数据库
2010/12/02 PHP
PHP使用strtotime计算两个给定日期之间天数的方法
2015/03/18 PHP
基于PHP技术开发客服工单系统
2016/01/06 PHP
yii2实现分页,带搜索的分页功能示例
2017/01/07 PHP
PHP使用第三方即时获取物流动态实例详解
2017/04/27 PHP
PHP+Redis 消息队列 实现高并发下注册人数统计的实例
2018/01/29 PHP
JS中confirm,alert,prompt函数使用区别分析
2010/04/01 Javascript
js+css在交互上的应用
2010/07/18 Javascript
CSS+jQuery实现的一个放大缩小动画效果
2013/09/24 Javascript
js自动生成对象的属性示例代码
2013/10/28 Javascript
分享一个自己写的简单的javascript分页组件
2015/02/15 Javascript
深入理解JavaScript系列(50):Function模式(下篇)
2015/03/04 Javascript
微信企业号开发之微信考勤Cookies的使用
2015/09/11 Javascript
nodejs个人博客开发第七步 后台登陆
2017/04/12 NodeJs
JS返回顶部实例代码
2020/08/09 Javascript
axios 封装上传文件的请求方法
2018/09/26 Javascript
微信小程序实现左滑修改、删除功能
2020/10/19 Javascript
JS集合set类的实现与使用方法示例
2019/02/01 Javascript
layer弹窗在键盘按回车将反复刷新的实现方法
2019/09/25 Javascript
原生js+canvas实现下雪效果
2020/08/02 Javascript
Pyhton中防止SQL注入的方法
2015/02/05 Python
python中Pycharm 输出中文或打印中文乱码现象的解决办法
2017/06/16 Python
python学习必备知识汇总
2017/09/08 Python
详解Python nose单元测试框架的安装与使用
2017/12/20 Python
python判断一个数是否能被另一个整数整除的实例
2018/12/12 Python
python线程定时器Timer实现原理解析
2019/11/30 Python
pytorch实现特殊的Module--Sqeuential三种写法
2020/01/15 Python
美国知名男士服饰品牌:Brooks Brothers(布克兄弟)
2016/08/25 全球购物
中国跨镜手机配件批发在线商店:TVC-Mall
2019/08/20 全球购物
估算杭州有多少软件工程师
2015/08/11 面试题
农村党支部书记四风问题个人对照检查材料
2014/09/21 职场文书
幼儿园个人总结
2015/02/28 职场文书
用Python的绘图库(matplotlib)绘制小波能量谱
2021/04/17 Python
Python 游戏大作炫酷机甲闯关游戏爆肝数千行代码实现案例进阶
2021/10/16 Python
windows10 家庭版下FTP服务器搭建教程
2022/08/05 Servers