过滤器vue.filters的使用方法实现


Posted in Javascript onSeptember 18, 2019

写项目的时候,有一些方法我们是需要全局使用的,比如数字的四色五入保留小数点啊、一些工具方法、字符的格式化啊等等。这些很多页面需要用的、使用频率极高的方法,我们一般会将其封装为全局的方法;我以前是这样做的,有这么几种方式:

1、挂载到vue.prototype

在main.js入口文件中挂载到vue.prototype,如我们封装一个获取时间戳的函数。

Vue.prototype.now = Date.now || function () { 
  return new Date().getTime(); 
};

然后就可以在.vue页面中使用了

<script> 
  export default {  
    mounted(){ 
      console.log('now:' + this.now()); 
    }, 
  } 
</script>

2、全局混入mixins

同样也还是在main.js中。

mixins的全局注入规则大家应该都懂,如果组件中没有这个getTime方法,那么就会在页面中注入这个方法。

Vue.mixin({
 data() {},
 methods: {
  getTime() { 
   return new Date().getTime();
  }
 } 
});
new App({
 el: '#app'
 // ...
});

3、关于vue.filters

(1)问题

前面两种方法弊端有很多,比如一般将全局变量挂载到prototype总是不太好的,状态管理我们用vuex;第二个全局混入的话,子组件中也会混入这些方法等等;最大的弊端就是代码的可读性和维护问题,如果项目体积大了,复用的方法多了,总不能都挂到prototye上去对吧?
这个时候,vue.filters过滤器就能够较好的解决这个问题。

(2)使用

先看一波官网-->传送门

ok,看完了,基本了解了过滤器的概念和基本使用方式以后,我们具体到项目中的使用。

新建一个filters文件夹,丢一行代码(很常用的一行代码,就是对数字做一些四舍五入的处理)

过滤器vue.filters的使用方法实现

数字四舍五入保留两位小数点

main.js中引入

// global filters
import Vue from 'vue';
import * as filters from '@/filters'; 

Object.keys(filters).forEach((key) => {
 Vue.filter(key, filters[key]);
});

然后页面中就可以使用了

<div>{{num | formatAmountFixed2}}</div>

<script>
data(){
  return {
    num: 11111
  }
}
</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery实现类似EasyUI的页面布局可改变左右的宽度
Sep 12 Javascript
coffeescript使用的方式汇总
Aug 05 Javascript
js验证身份证号有效性并提示对应信息
Oct 19 Javascript
使用EVAL处理jqchart jquery 折线图返回数据无效的解决办法
Nov 26 Javascript
js实现有过渡渐变效果的图片轮播相册(兼容IE,ff)
Jan 19 Javascript
jQuery图片渐变特效的简单实现
Jun 25 Javascript
滚动条的监听与内容随着滚动条动态加载的实现
Feb 08 Javascript
Angular2安装angular-cli
May 21 Javascript
VUE axios上传图片到七牛的实例代码
Jul 28 Javascript
使用 vue-i18n 切换中英文效果
May 23 Javascript
JS函数本身的作用域实例分析
Mar 16 Javascript
React冒泡和阻止冒泡的应用详解
Aug 18 Javascript
layui问题之自动滚动二级iframe页面到指定位置的方法
Sep 18 #Javascript
解决使用layui对select append元素无效或者未及时更新的问题
Sep 18 #Javascript
Flutter实现仿微信底部菜单栏功能
Sep 18 #Javascript
详解element-ui中表单验证的三种方式
Sep 18 #Javascript
layui的布局和表格的渲染以及动态生成表格的方法
Sep 18 #Javascript
vue中使用element组件时事件想要传递其他参数的问题
Sep 18 #Javascript
解决layui追加或者动态修改的表单元素“没效果”的问题
Sep 18 #Javascript
You might like
PHP的变量类型和作用域详解
2014/03/12 PHP
tp5(thinkPHP5框架)时间查询操作实例分析
2019/05/29 PHP
疯掉了,尽然有js写的操作系统
2007/04/23 Javascript
扩展javascript的Date方法实现代码(prototype)
2010/11/20 Javascript
javascript开发随笔一 preventDefault的必要
2011/11/25 Javascript
21个值得收藏的Javascript技巧
2014/02/04 Javascript
jQuery实现HTML5 placeholder效果实例
2014/12/09 Javascript
jQuery实现页面滚动时动态加载内容的方法
2015/03/20 Javascript
初步使用bootstrap快速创建页面
2016/03/03 Javascript
浅析JS动态创建元素【两种方法】
2016/04/20 Javascript
JS简单去除数组中重复项的方法
2016/09/13 Javascript
js实现html table 行,列锁定的简单实例
2016/10/13 Javascript
Bootstrap企业网站实战项目4
2016/10/14 Javascript
Angular2下使用pdf插件的方法详解
2017/04/29 Javascript
javascript使用substring实现的展开与收缩文字功能示例
2019/06/17 Javascript
MockJs结合json-server模拟后台数据
2020/08/26 Javascript
[03:37]2016完美“圣”典 风云人物:Mikasa专访
2016/12/07 DOTA
python模拟登录百度贴吧(百度贴吧登录)实例
2013/12/18 Python
一条命令解决mac版本python IDLE不能输入中文问题
2018/05/15 Python
python实现感知机线性分类模型示例代码
2019/06/02 Python
python for和else语句趣谈
2019/07/02 Python
解决jupyter运行pyqt代码内核重启的问题
2020/04/16 Python
Pymysql实现往表中插入数据过程解析
2020/06/02 Python
关于tensorflow softmax函数用法解析
2020/06/30 Python
CSS3 创建网页动画实现弹跳球动效果
2018/10/30 HTML / CSS
HTML5 播放 RTSP 视频的实例代码
2019/07/29 HTML / CSS
英国最受欢迎的价格比较网站之一:MoneySuperMarket
2018/12/19 全球购物
自主招生自荐信指南
2014/02/04 职场文书
学校领导班子四风问题整改意见
2014/10/02 职场文书
劳动纠纷调解协议书格式
2014/11/30 职场文书
2014初中数学教研组工作总结
2014/12/19 职场文书
中秋节祝酒词
2015/08/12 职场文书
2016思想纪律作风整顿心得体会
2016/01/23 职场文书
如何使用 resize 实现图片切换预览功能
2021/08/23 HTML / CSS
关于Vue中的options选项
2022/03/22 Vue.js
nginx访问报403错误的几种情况详解
2022/07/23 Servers