过滤器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 相关文章推荐
JavaScript面向对象之体会[总结]
Nov 13 Javascript
JQUERY1.6 使用方法四 检测浏览器
Nov 23 Javascript
在表单提交前进行验证的几种方式整理
Jul 31 Javascript
js取float型小数点后两位数的方法
Jan 18 Javascript
jQuery+ajax中getJSON() 用法实例
Dec 22 Javascript
js代码实现无缝滚动(文字和图片)
Aug 20 Javascript
ng-options和ng-checked在表单中的高级运用(推荐)
Jan 21 Javascript
JavaScript中的一些隐式转换和总结(推荐)
Dec 22 Javascript
Layui 设置select下拉框自动选中某项的方法
Aug 14 Javascript
详解关于Angular4 ng-zorro使用过程中遇到的问题
Dec 05 Javascript
javascript实现动态时钟的启动和停止
Jul 29 Javascript
Vue如何清空对象
Mar 03 Vue.js
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
javascript css float属性的特殊写法
2008/11/13 Javascript
JavaScript去掉数组中的重复元素
2011/01/13 Javascript
对JavaScript中this指针的新理解分享
2015/01/31 Javascript
javascript学习总结之js使用技巧
2015/09/02 Javascript
Javascript实现商品秒杀倒计时(时间与服务器时间同步)
2015/09/16 Javascript
跟我学习javascript的函数和函数表达式
2015/11/16 Javascript
javascript 判断是否是微信浏览器的方法
2016/10/09 Javascript
JS定时检测任务任务完成后执行下一步的解决办法
2016/12/22 Javascript
jQuery中的deferred对象和extend方法详解
2017/05/08 jQuery
Angular.js实现获取验证码倒计时60秒按钮的简单方法
2017/10/18 Javascript
Vue中v-show添加表达式的问题(判断是否显示)
2018/03/26 Javascript
深入理解NodeJS 多进程和集群
2018/10/17 NodeJs
Koa 使用小技巧(小结)
2018/10/22 Javascript
JavaScript函数的特性与应用实践深入详解
2018/12/30 Javascript
jQuery实现模拟搜索引擎的智能提示功能简单示例
2019/01/27 jQuery
Vue.js递归组件实现组织架构树和选人功能
2019/07/04 Javascript
Vue中正确使用Element-UI组件的方法实例
2020/10/13 Javascript
python实现的生成随机迷宫算法核心代码分享(含游戏完整代码)
2014/07/11 Python
Python通过OpenCV的findContours获取轮廓并切割实例
2018/01/05 Python
python+POP3实现批量下载邮件附件
2018/06/19 Python
opencv python 图像去噪的实现方法
2018/08/31 Python
解决pycharm 误删掉项目文件的处理方法
2018/10/22 Python
[原创]Python入门教程3. 列表基本操作【定义、运算、常用函数】
2018/10/30 Python
对numpy中二进制格式的数据存储与读取方法详解
2018/11/01 Python
python random从集合中随机选择元素的方法
2019/01/23 Python
python 调用钉钉机器人的方法
2019/02/20 Python
python上下文管理器异常问题解决方法
2021/02/07 Python
CHARLES & KEITH加拿大官网:新加坡时尚品牌
2020/03/26 全球购物
SQL SERVER面试资料
2013/03/30 面试题
sleep()方法和wait()方法的区别是什么
2012/11/17 面试题
优秀班组申报材料
2014/12/25 职场文书
社区工作者个人总结
2015/02/28 职场文书
办公室管理规章制度
2015/08/04 职场文书
先进党支部事迹材料2016
2016/02/26 职场文书
申论不会写怎么办?教您掌握这6点思维和原则
2019/07/17 职场文书
golang为什么要统一错误处理
2022/04/03 Golang