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 相关文章推荐
提高 DHTML 页面性能
Dec 25 Javascript
JS 中document.URL 和 windows.location.href 的区别
Nov 11 Javascript
javascript当onmousedown、onmouseup、onclick同时应用于同一个标签节点Element
Jan 05 Javascript
删除select中所有option选项jquery代码
Aug 12 Javascript
将JavaScript的jQuery库中表单转化为JSON对象的方法
Nov 17 Javascript
JS实现对中文字符串进行utf-8的Base64编码的方法(使其与Java编码相同)
Jun 21 Javascript
AngularJS动态绑定HTML的方法分析
Nov 07 Javascript
jQuery实现新闻播报滚动及淡入淡出效果示例
Mar 23 jQuery
全站最详细的Vuex教程
Apr 13 Javascript
了解Javascript中函数作为对象的魅力
Jun 19 Javascript
Vue 监听元素前后变化值实例
Jul 29 Javascript
实现AJAX异步调用和局部刷新的基本步骤
Mar 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
各种咖啡的英文名子是什么
2021/03/03 新手入门
浅谈laravel orm 中的一对多关系 hasMany
2019/10/21 PHP
javascript设计模式 封装和信息隐藏(上)
2012/07/24 Javascript
jquery选择器-根据多个属性选择示例代码
2013/10/21 Javascript
浅析hasOwnProperty方法的应用
2013/11/20 Javascript
使用jquery实现放大镜效果
2014/09/02 Javascript
sogou地图API用法实例教程
2014/09/11 Javascript
原生js实现倒计时--2018
2017/02/21 Javascript
VUE 使用中踩过的坑
2018/02/08 Javascript
微信小程序中使用wxss加载图片并实现动画效果
2018/08/13 Javascript
详解解决小程序中webview页面多层history返回问题
2019/08/20 Javascript
vue 使用v-for进行循环的实例代码详解
2020/02/19 Javascript
webpack 动态批量加载文件的实现方法
2020/03/19 Javascript
prettier自动格式化去换行的实现代码
2020/08/25 Javascript
[32:30]夜魇凡尔赛茶话会 第一期01:谁是卧底
2021/03/11 DOTA
python使用心得之获得github代码库列表
2014/06/25 Python
Linux 发邮件磁盘空间监控(python)
2016/04/23 Python
深入理解Python3中的http.client模块
2017/03/29 Python
Python 实现淘宝秒杀的示例代码
2018/01/02 Python
详解Python 爬取13个旅游城市,告诉你五一大家最爱去哪玩?
2019/05/07 Python
Python hashlib模块的使用示例
2020/10/09 Python
网易微博Web App用HTML5开发的过程介绍
2012/06/13 HTML / CSS
土耳其风格手工珠宝:Ottoman Hands
2019/07/26 全球购物
服装销售人员求职自我评价
2013/09/26 职场文书
自考毕业生自我鉴定
2013/11/04 职场文书
2014年中班元旦活动方案
2014/02/14 职场文书
中学生操行评语
2014/04/24 职场文书
主题班会演讲稿
2014/05/22 职场文书
企业法人代表任命书
2014/06/06 职场文书
食堂厨师岗位职责
2014/08/25 职场文书
私人房屋买卖协议书
2014/10/04 职场文书
病人家属写给医院的感谢信
2015/01/23 职场文书
歌咏比赛口号大全
2015/12/25 职场文书
导游词之麻姑仙境
2019/11/18 职场文书
十二月早安励志心语大全
2019/12/03 职场文书
Java常用工具类汇总 附示例代码
2021/06/26 Java/Android