在vue中使用公共过滤器filter的方法


Posted in Javascript onJune 26, 2018

平时我们在vue中使用过滤器时,在模板中定义的过滤器不能在其他模板中使用,所以要在每个模板中定义自己的filter,这样就会出现很多重复的代码,那有没有办法定义一个公用的filter,减少代码的重复呢?

下面就给大家展示下使用最多且有效的方法吧!

•首先在公用js中定义一个通用的filter.js,如下图所示,记得一定要把代码整个export出来

const vFilter={ 
 numFilter:function (value) { 
   // 截取当前数据到小数点后两位 
   let realVal = Number(value).toFixed(2) 
   return realVal 
  } 
 } 
export default vFilter

•然后在main.js中引入

import vueFilter from './js/filter' 
for (let key in vueFilter){ 
 Vue.filter(key,vueFilter[key]) 
}

•这样我们就可以在模板中尽情使用啦,比如说

<p class="goods-info-p ">¥{{goodsItem.goodsPrice|numFilter}}</p>

总结

以上所述是小编给大家介绍的在vue中使用公共过滤器filter的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js获取select选中的option的text示例代码
Dec 19 Javascript
js清空表单数据的两种方式(遍历+reset)
Jul 18 Javascript
Jquery中CSS选择器用法分析
Feb 10 Javascript
jQuery层动画定位滑动效果的方法
Apr 30 Javascript
JavaScript中的fontsize()方法使用详解
Jun 08 Javascript
浅谈Javascript中substr和substring的区别
Sep 30 Javascript
jQuery基于ajax()使用serialize()提交form数据的方法
Dec 08 Javascript
SWFUpload多文件上传及文件个数限制的方法
May 31 Javascript
jQuery简单实现列表隐藏和显示效果示例
Sep 12 Javascript
Vue 去除路径中的#号
Apr 19 Javascript
node.js使用redis储存session的方法
Sep 26 Javascript
在vue中使用cookie记住用户上次选择的实例(本次例子中为下拉框)
Sep 11 Javascript
Vue不能检测到Object/Array更新的情况的解决
Jun 26 #Javascript
vue中element-ui表格缩略图悬浮放大功能的实例代码
Jun 26 #Javascript
Vue动态控制input的disabled属性的方法
Jun 26 #Javascript
利用Decorator如何控制Koa路由详解
Jun 26 #Javascript
vue实现点击关注后及时更新列表功能
Jun 26 #Javascript
微信小程序项目总结之点赞 删除列表 分享功能
Jun 25 #Javascript
nuxt.js 缓存实践
Jun 25 #Javascript
You might like
木翼下载系统中说明的PHP安全配置方法
2007/06/16 PHP
PHP最常用的ini函数分析 针对PHP.ini配置文件
2010/04/22 PHP
php中get_headers函数的作用及用法的详细介绍
2013/04/27 PHP
深入探究PHP的多进程编程方法
2015/08/18 PHP
thinkPHP5框架分页样式类完整示例
2018/09/01 PHP
php7 list()、session及其他模块的修改实例分析
2020/05/25 PHP
javascript 读取XML数据,在页面中展现、编辑、保存的实现
2009/10/27 Javascript
SwfUpload在IE10上不出现上传按钮的解决方法
2013/06/25 Javascript
关于onchange事件在IE和FF下的表现及解决方法
2014/03/08 Javascript
JavaScript实现的一个倒计时的类
2015/03/12 Javascript
jQuery实现的指纹扫描效果实例(附演示与demo源码下载)
2016/01/26 Javascript
AngularJS动态生成div的ID源码解析
2016/08/29 Javascript
Javascript动画效果(3)
2016/10/11 Javascript
angularJS 发起$http.post和$http.get请求的实现方法
2017/05/18 Javascript
node.js 发布订阅模式的实例
2017/09/10 Javascript
Vue实现一个无限加载列表功能
2018/11/13 Javascript
jQuery Raty星级评分插件使用方法实例分析
2019/11/25 jQuery
微信小程序用户盒子、宫格列表的实现
2020/07/01 Javascript
[01:18]DOTA2超级联赛专访hanci ForLove淘汰感言曝光
2013/06/04 DOTA
[53:10]完美世界DOTA2联赛决赛日 FTD vs GXR 第二场 11.08
2020/11/11 DOTA
Python通过future处理并发问题
2017/10/17 Python
Tornado高并发处理方法实例代码
2018/01/15 Python
在Django中输出matplotlib生成的图片方法
2018/05/24 Python
Python递归函数实例讲解
2019/02/27 Python
在pandas中遍历DataFrame行的实现方法
2019/10/23 Python
python 实现快速生成连续、随机字母列表
2019/11/28 Python
利用python实现逐步回归
2020/02/24 Python
Python urllib2运行过程原理解析
2020/06/04 Python
K近邻法(KNN)相关知识总结以及如何用python实现
2021/01/28 Python
FitFlop澳大利亚官网:英国符合人体工学的鞋类品牌
2017/06/05 全球购物
英国在线潜水商店:Simply Scuba
2019/03/25 全球购物
英国最好的温室之家:Greenhouses Direct
2019/07/13 全球购物
感恩父母的演讲稿
2014/05/06 职场文书
军训阅兵新闻稿
2015/07/17 职场文书
2015年三好一满意工作总结
2015/07/24 职场文书
python实现自动清理文件夹旧文件
2021/05/10 Python