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的with语句使用方法
Sep 21 Javascript
了不起的node.js读书笔记之node.js中的特性
Dec 22 Javascript
jQuery实现精美的多级下拉菜单特效
Mar 14 Javascript
JS设置cookie、读取cookie、删除cookie
Apr 17 Javascript
js中this用法实例详解
May 05 Javascript
angularjs 源码解析之scope
Aug 22 Javascript
javascript实现根据函数名称字符串动态执行函数的方法示例
Dec 28 Javascript
Bootstrap模态框使用详解
Feb 15 Javascript
JS解析url查询参数的简单代码
Aug 06 Javascript
[js高手之路]寄生组合式继承的优势详解
Aug 28 Javascript
layui 上传文件_批量导入数据UI的方法
Sep 23 Javascript
Ant Design Pro 下实现文件下载的实现代码
Dec 03 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中批量修改文件后缀名的函数代码
2011/10/23 PHP
php+mysqli数据库连接的两种方式
2015/01/28 PHP
yii通过小物件生成view的方法
2016/10/08 PHP
PHP实现上传多图即时显示与即时删除的方法
2017/05/09 PHP
PHP实现的简单在线计算器功能示例
2017/08/02 PHP
PHP设计模式之工厂模式(Factory Pattern)的讲解
2019/03/21 PHP
PHP全局使用Laravel辅助函数dd
2019/12/26 PHP
javascript中的继承实例代码
2011/04/27 Javascript
javascript异步处理工作机制详解
2015/04/13 Javascript
jquery实现可横向和竖向展开的动态下滑菜单效果
2015/08/24 Javascript
JavaScript正则表达式匹配 div  style标签
2016/03/15 Javascript
为什么JavaScript没有块级作用域
2016/05/22 Javascript
AngularJS基础 ng-focus 指令简单示例
2016/08/01 Javascript
JS实现将Asp.Net的DateTime Json类型转换为标准时间的方法
2016/08/02 Javascript
移动端js触摸事件详解
2016/09/18 Javascript
TypeScript入门-基本数据类型
2017/03/28 Javascript
jquery实现限制textarea输入字数的方法
2017/09/06 jQuery
vue2+el-menu实现路由跳转及当前项的设置方法实例
2017/11/07 Javascript
js中Array对象的常用遍历方法详解
2019/01/17 Javascript
vue百度地图 + 定位的详解
2019/05/13 Javascript
vue的三种图片引入方式代码实例
2019/11/19 Javascript
JS插入排序简单理解与实现方法分析
2019/11/25 Javascript
Python中使用copy模块实现列表(list)拷贝
2015/04/14 Python
python编程实现随机生成多个椭圆实例代码
2018/01/03 Python
python使用magic模块进行文件类型识别方法
2018/12/08 Python
pandas去重复行并分类汇总的实现方法
2019/01/29 Python
Python常用库大全及简要说明
2020/01/17 Python
django中url映射规则和服务端响应顺序的实现
2020/04/02 Python
如何安装并在pycharm使用selenium的方法
2020/04/30 Python
什么是python的函数体
2020/06/19 Python
zooplus意大利:在线宠物商店
2019/08/07 全球购物
酒店总经理欢迎词
2014/01/15 职场文书
公司门卫岗位职责范本
2014/07/08 职场文书
关于有小孩的离婚协议书
2014/10/26 职场文书
实操Python爬取觅知网素材图片示例
2021/11/27 Python
python游戏开发之pygame实现接球小游戏
2022/04/22 Python