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 CSS修改学习第五章 给“上传”添加样式
Feb 19 Javascript
跨浏览器开发经验总结(三)   警惕“IE依赖综合症”
May 13 Javascript
jquery通过visible来判断标签是否显示或隐藏
May 08 Javascript
Javascript中arguments对象详解
Oct 22 Javascript
Javascript aop(面向切面编程)之around(环绕)分析
May 01 Javascript
JQuery实现动态添加删除评论的方法
May 18 Javascript
常用的Javascript数据验证插件
Aug 04 Javascript
js仿iphone秒表功能 计算平均数
Jan 11 Javascript
JS基于贪心算法解决背包问题示例
Nov 27 Javascript
vue单页应用加百度统计代码(亲测有效)
Jan 31 Javascript
JS散列表碰撞处理、开链法、HashTable散列示例
Feb 08 Javascript
微信小程序wx.request的简单封装
Nov 13 Javascript
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&amp;&amp;mysql)三
2006/10/09 PHP
在WAMP环境下搭建ZendDebugger php调试工具的方法
2011/07/18 PHP
php引用地址改变变量值的问题
2012/03/23 PHP
php及codeigniter使用session-cookie的方法(详解)
2017/04/06 PHP
PHP实现数组向任意位置插入,删除,替换数据操作示例
2019/04/05 PHP
js 巧妙去除数组中的重复项
2010/01/25 Javascript
IE6弹出“已终止操作”的解决办法
2010/11/27 Javascript
JavaScript中的this实例分析
2011/04/28 Javascript
dwz 如何去掉ajaxloading具体代码
2013/05/22 Javascript
jquery使用ajax实现微信自动回复插件
2014/04/28 Javascript
jQuery中prevAll()方法用法实例
2015/01/08 Javascript
jQuery实现移动 和 渐变特效的点击事件
2015/02/26 Javascript
jQuery对象与DOM对象之间的相互转换
2015/03/03 Javascript
javascript验证手机号和实现星号(*)代替实例
2016/08/16 Javascript
angularjs实现多张图片上传并预览功能
2017/02/24 Javascript
详解vue 实例方法和数据
2017/10/23 Javascript
jquery实现购物车基本功能
2019/10/25 jQuery
vue-cli3.X快速创建项目的方法步骤
2019/11/14 Javascript
Windows和Linux下使用Python访问SqlServer的方法介绍
2015/03/10 Python
Windows下PyMongo下载及安装教程
2015/04/27 Python
使用Python脚本将Bing的每日图片作为桌面的教程
2015/05/04 Python
深入讲解Python中面向对象编程的相关知识
2015/05/25 Python
Python在信息学竞赛中的运用及Python的基本用法(详解)
2017/08/15 Python
Python使用一行代码获取上个月是几月
2018/08/30 Python
pandas中的series数据类型详解
2019/07/06 Python
详解Python实现进度条的4种方式
2020/01/15 Python
jupyter notebook 的工作空间设置操作
2020/04/20 Python
用 Django 开发一个 Python Web API的方法步骤
2020/12/03 Python
健身场所或家用健身设备:Life Fitness
2017/11/01 全球购物
汽车专业学生自我评价
2014/01/19 职场文书
优秀共产党员先进事迹材料
2014/05/06 职场文书
校园安全标语
2014/06/07 职场文书
赵乐秦在党的群众路线教育实践活动总结大会上的讲话稿
2014/10/25 职场文书
博士导师推荐信
2015/03/25 职场文书
领导欢送会主持词
2015/07/06 职场文书
公司规章制度范本
2015/08/03 职场文书