vue-cli 3 全局过滤器的实例代码详解


Posted in Javascript onJune 03, 2019

vue-cli 3 全局过滤器的实例代码详解

在vue1.x版本里是自带里几个基础的过滤器的(虽然不怎么用到)。

到了vue2.x版本之后,内置到几个过滤器就被删掉了,如果需要用到过滤器,就要开发者自己去定义。

可以把过滤器定义在某个组件内部,但这样就成了局部过滤器,在别的组件里是无法使用的。所以通常不会这么做。

也可以把过滤器写在main.js里。但如果项目中存在多个过滤器,这会使main.js文件看上去很庞大,不便于后期维护。

所以通常会新建一个js文件,专门用来存放所有过滤器。最后再引到main.js中供全局使用。

1、创建 filters.js

首先新建一个filters.js文件。把这个文件放在 src/assets 里。

vue-cli 3 全局过滤器的实例代码详解

因为这里是用来存放静态资源的。这个文件夹可以用来存放图片、css和部分自定义的功能的js资源。如果需要更好的分类,可以在 assets 文件夹里再创建 js 、 css 、 img 等文件夹。

2、创建过滤器规则

这里我创建了3个过滤器

// 转小写
let lower = value => value.toLowerCase();
// 转大写
let upper = value => value.toUpperCase();
let currencyStyle = (value, style) => { // 货币格式
  /**
   * style: 
   *   currency:货币
   *   number: 数字格式
   */
  if(style == 'number') { // 数字格式
    return parseFloat(value.replace(/[^\d\.-]/g, ""));
  } else { // 货币格式, 并保留2位小数
    var n = 2;
    value = parseFloat((value + "").replace(/[^\d\.-]/g, "")).toFixed(n) + "";
    var l = value.split(".")[0].split("").reverse(),
      r = value.split(".")[1];
    var t = "";
    for (var i = 0; i < l.length; i++) {
      t += l[i] + ((i + 1) % 3 == 0 && (i + 1) != l.length ? "," : "");
    }
    return t.split("").reverse().join("") + "." + r;
  }
}
export {
  lower,
  upper,
  currencyStyle
}

3、在main.js里注册全局过滤器

import Vue from 'vue'
import App from './App.vue'
import * as filters from './assets/filters'
Object.keys(filters).forEach(key => {
 Vue.filter(key, filters[key])
})
Vue.config.productionTip = false
new Vue({
 render: h => h(App),
}).$mount('#app')

通过 forEach 循环,把自定义功能分别注册到过滤器里。

4、在组件里使用

<template>
 <div id="app">
  <p>{{ num1 | currencyStyle('currency') }}</p>
  <p>{{ num2 | currencyStyle('number') }}</p>
  <p>{{ msg1 | lower }}</p>
  <p>{{ msg2 | upper }}</p>
 </div>
</template>
<script>
export default {
 name: 'app',
 data() {
  return {
   num1: 123456,
   num2: '123,456',
   msg1: 'ABC',
   msg2: 'def'
  }
 }
}
</script>

vue-cli 3 全局过滤器的实例代码详解

总结

以上所述是小编给大家介绍的vue-cli 3 全局过滤器的实例代码详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
浅谈JavaScript中定义变量时有无var声明的区别
Aug 18 Javascript
javascript跨域的方法汇总
Oct 23 Javascript
javascript类型系统 Array对象学习笔记
Jan 09 Javascript
在localStorage中存储对象数组并读取的方法
Sep 24 Javascript
jquery.tableSort.js表格排序插件使用方法详解
Aug 12 Javascript
js replace()去除代码中空格的实例
Feb 14 Javascript
JS实现的二叉树算法完整实例
Apr 06 Javascript
vue2.0 中#$emit,$on的使用详解
Jun 07 Javascript
详解Angular4中路由Router类的跳转navigate
Jun 09 Javascript
Node.js 回调函数实例详解
Jul 06 Javascript
Redux实现组合计数器的示例代码
Jul 04 Javascript
vue3中轻松实现switch功能组件的全过程
Jan 07 Vue.js
vue2之简易的pc端短信验证码的问题及处理方法
Jun 03 #Javascript
使用RxJS更优雅地进行定时请求详析
Jun 02 #Javascript
Vue CLI3基础学习之pages构建多页应用
Jun 02 #Javascript
Vue基础学习之项目整合及优化
Jun 02 #Javascript
JavaScript判断对象和数组的两种方法
May 31 #Javascript
vue中node_modules中第三方模块的修改使用详解
May 31 #Javascript
Vuex新手的理解与使用详解
May 31 #Javascript
You might like
php编程中echo用逗号和用点号连接的区别
2016/03/26 PHP
50个优秀经典PHP算法大集合 附源码
2020/08/26 PHP
javascript数组的扩展实现代码集合
2008/06/01 Javascript
js 判断脚本加载完毕的代码
2011/07/13 Javascript
利用jquery的获取JS文件中的字符串内容
2012/02/14 Javascript
jquery实现每个数字上都带进度条的幻灯片
2013/02/20 Javascript
JavaScript eval() 函数介绍及应用示例
2014/07/29 Javascript
jQuery使用after()方法在元素后面添加多项内容的方法
2015/03/26 Javascript
jquery实现网页的页面平滑滚动效果代码
2015/11/02 Javascript
JavaScript获取页面中超链接数量的方法
2015/11/09 Javascript
JS动态给对象添加事件的简单方法
2016/07/19 Javascript
Iscrool下拉刷新功能实现方法(推荐)
2017/06/26 Javascript
利用C/C++编写node.js原生模块的方法教程
2017/07/07 Javascript
JS动态添加的div点击跳转到另一页面实现代码
2017/09/30 Javascript
nodejs async异步常用函数总结(推荐)
2017/11/17 NodeJs
详解React中setState回调函数
2018/06/14 Javascript
vue19 组建 Vue.extend component、组件模版、动态组件 的实例代码
2019/04/04 Javascript
使用Angular9和TypeScript开发RPG游戏的方法
2020/03/25 Javascript
Python实现字典的遍历与排序功能示例
2017/12/23 Python
Python数据分析之双色球统计单个红和蓝球哪个比例高的方法
2018/02/03 Python
Python cookbook(数据结构与算法)从序列中移除重复项且保持元素间顺序不变的方法
2018/03/13 Python
Python操作MySQL数据库的方法
2018/06/20 Python
对python中的six.moves模块的下载函数urlretrieve详解
2018/12/19 Python
python3.x+pyqt5实现主窗口状态栏里(嵌入)显示进度条功能
2019/07/04 Python
python日期与时间戳的各种转换示例
2020/02/12 Python
python GUI库图形界面开发之PyQt5信号与槽的高级使用技巧(自定义信号与槽)详解与实例
2020/03/06 Python
基于Python实现简单学生管理系统
2020/07/24 Python
python的dict判断key是否存在的方法
2020/12/09 Python
乐高西班牙官方商店:LEGO Shop ES
2019/12/01 全球购物
园林资料员岗位职责
2013/12/30 职场文书
2014年教师培训的自我评价
2014/01/03 职场文书
活动总结报告格式
2014/05/09 职场文书
班级读书活动总结
2014/06/30 职场文书
销售业务员岗位职责
2015/02/13 职场文书
倡议书范文大全
2015/04/28 职场文书
新员工试用期工作总结2015
2015/05/28 职场文书