在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 innerHTML 改变div内容的方法
Aug 03 Javascript
Node.js异步I/O学习笔记
Nov 04 Javascript
探寻Javascript执行效率问题
Nov 12 Javascript
jQuery通过扩展实现抖动效果的方法
Mar 11 Javascript
详解maxlength属性在textarea里奇怪的表现
Dec 27 Javascript
JS实现table表格数据排序功能(可支持动态数据+分页效果)
May 26 Javascript
Java框架SSH结合Easyui控件实现省市县三级联动示例解析
Jun 12 Javascript
AngularJS 过滤与排序详解及实例代码
Sep 14 Javascript
清空元素html(&quot;&quot;) innerHTML=&quot;&quot; 与 empty()的区别和应用(推荐)
Aug 14 Javascript
npm 语义版本控制详解
Sep 10 Javascript
js实现3D照片墙效果
Oct 28 Javascript
Vue移动端用淘宝弹性布局lib-flexible插件做适配的方法
May 26 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中return 和 exit 、break和contiue 区别与用法
2012/04/09 PHP
php实现的发送带附件邮件类实例
2014/09/22 PHP
php array 转json及java 转换 json数据格式操作示例
2019/11/13 PHP
模拟用户点击弹出新页面不会被浏览器拦截
2014/04/08 Javascript
window.location的重写及判断location是否被重写
2014/09/04 Javascript
每天一篇javascript学习小结(Array数组)
2015/11/11 Javascript
JS中改变this指向的方法(call和apply、bind)
2016/03/26 Javascript
JavaScript中创建对象的7种模式详解
2017/02/21 Javascript
微信小程序 开发之全局配置
2017/05/05 Javascript
JavaScript面向对象精要(上部)
2017/09/12 Javascript
javascript 作用于作用域链的详解
2017/09/27 Javascript
Vuex 入门教程
2018/01/10 Javascript
jQuery实现的简单图片轮播效果完整示例
2018/02/08 jQuery
基于Vue渲染与插件的加载顺序的问题详解
2018/03/05 Javascript
node.js利用socket.io实现多人在线匹配联机五子棋
2018/05/31 Javascript
bootstrap里bootstrap动态加载下拉框的实例讲解
2018/08/10 Javascript
初学vue出现空格警告的原因及其解决方案
2019/10/31 Javascript
JavaScript实现像雪花一样的Hexaflake分形
2020/07/07 Javascript
vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据操作
2020/07/31 Javascript
[55:39]DOTA2-DPC中国联赛 正赛 VG vs LBZS BO3 第二场 1月19日
2021/03/11 DOTA
[04:45]DOTA2-DPC中国联赛正赛 iG vs LBZS 赛后选手采访
2021/03/11 DOTA
windows下pycharm安装、创建文件、配置默认模板
2018/07/31 Python
情人节快乐! python绘制漂亮玫瑰
2020/08/18 Python
查看端口并杀进程python脚本代码
2019/12/17 Python
解决Tensorflow 使用时cpu编译不支持警告的问题
2020/02/03 Python
jupyter notebook tensorflow打印device信息实例
2020/04/20 Python
Keras 使用 Lambda层详解
2020/06/10 Python
python自动化测试三部曲之unittest框架的实现
2020/10/07 Python
SteelSeries赛睿官网:游戏外设和配件的领先制造商(耳机、键盘、鼠标和鼠标垫)
2018/06/17 全球购物
马来西亚户外装备商店:PTT Outdoor
2019/07/13 全球购物
医学专业五年以上个人求职信
2013/12/03 职场文书
高校自主招生自荐信
2013/12/09 职场文书
刊首寄语大全
2014/04/11 职场文书
餐厅感恩节活动策划方案
2014/10/11 职场文书
法律意见书范文
2015/05/20 职场文书
导游词之桂林
2019/08/20 职场文书