局部过滤器(放在组件里)

filters: { //局部过滤器
FormattingMoney:value=>{
return value==null? '0' : value/100
}
},

使用:{{money | FormattingMoney}}

全局过滤器(放main.js)

Vue.filter("ellipsis", (str, maxLen) => {
return str.length > maxLen ? str.slice(0, maxLen) + "..." : str;
})

使用:{{title | ellipsis(20)}}

注:第一个参数默认为要过滤的值


当项目所用到的过滤器比较多时,把方法定义在一个js文件里面导出

/src/common/custom.js

let FormattingMoney = value => {
return value==null? '0' : value/100
}
export { FormattingMoney }

/src/main.js

import * as custom from './common/custom'

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

然后在其他的.vue 文件中就可愉快地使用这些我们定义好的全局过滤器了

{{ money | FormattingMoney }}

Vue 全局过滤和局部过滤的更多相关文章

  1. 详解vue全局组件与局部组件使用方法

    这篇文章主要为大家详细介绍了vue全局组件与局部组件的使用方法,具有一定的参考价值,对此有需要的朋友可以参考学习下.如有不足之处,欢迎批评指正. vue全局/局部注册,以及一些混淆的组件main.js ...

  2. vue全局注册与局部注册的写法

    vue全局注册是每个实例化的vue都可以使用,而局部则是实例化注册的那个可以用.举个例子,看看写法: <div id="app"> <p>页面载入时,inp ...

  3. vue全局组件和局部组件

    1.全局注册组件 Vue.componet('name',{ template:'<div></div>', data(){ retrun {} } }) 使用了以上这种方式注 ...

  4. vue -全局组件和局部组件

    1.全局组件:Vue.component('标签名', 构造器名) Vue.component('mycpn', cpnC) 注:这种注册组件的方式是全局组件,可以在多个Vue实例中使用. 2.局部组 ...

  5. vue全局组件与局部组件

    <!DOCTYPE html> <html> <head> <title></title> </head> <script ...

  6. vue货币格式化组件、局部过滤功能以及全局过滤功能

    一.在这里介绍一个vue的时间格式化插件: moment 使用方法: .npm install moment --save. 2 定义时间格式化全局过滤器 在main.js中 导入组件 import ...

  7. vue.js中的全局组件和局部组件

    组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素, Vue.js 的编译器为它添加特殊功能. 组件的使用有三 ...

  8. Vue 组件&组件之间的通信 之全局组件与局部组件

    在上篇博客中介绍了组件,在注册组件的简写中就用到了全局组件 //注册组件的简写方式 Vue.component('my-componenta',{ template:'<h2>hello ...

  9. vue.js 组件-全局组件和局部组件

    这两天学习了Vue.js 感觉组件这个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记. 首先Vue组件的使用有3个步骤,创建组件构造器,注册组件,使用组件3个方面. 代码演示如下: <! ...

随机推荐

  1. Android源代码解析之(十三)--&gt;apk安装流程

    转载请标明出处:一片枫叶的专栏 上一篇文章中给大家分析了一下android系统启动之后调用PackageManagerService服务并解析系统特定文件夹.解析apk文件并安装的过程,这个安装过程实 ...

  2. POJ - 3321 Apple Tree (线段树 + 建树 + 思维转换)

    id=10486" target="_blank" style="color:blue; text-decoration:none">POJ - ...

  3. 福利贴——爬取美女图片的Java爬虫小程序代码

    自己做的一个Java爬虫小程序 废话不多说.先上图. 目录命名是用标签缩写,假设大家看得不顺眼能够等完成下载后手动改一下,比方像有强迫症的我一样... 这是挂了一个晚上下载的总大小,只是还有非常多由于 ...

  4. UVa 10954 Add All 贪心

    贪心   每一次取最小的两个数,注意相加的数也要算' #include<cstring> #include<iostream> #include<cstdio> # ...

  5. Android学习路线(十二)Activity生命周期——启动一个Activity

    DEMO下载地址:http://download.csdn.net/detail/sweetvvck/7728735 不像其他的编程模式那样应用是通过main()函数启动的.Android系统通过调用 ...

  6. 登录那些事儿+ Session原理

    http://cnodejs.org/topic/5671441a1d2912ce2a35aaa1  登录那些事儿 http://www.jianshu.com/p/2b7c10291aad Sess ...

  7. jQuery的效果函数

    jQuery的效果函数有很多,下面让我们一起看看jQuery的效果函数吧: jQuery的效果函数列表: animate():对被选元素应用“自定义”的动画. clearQueue():对被选元素移除 ...

  8. 一篇文章教会你理解Scrapy网络爬虫框架的工作原理和数据采集过程

    今天小编给大家详细的讲解一下Scrapy爬虫框架,希望对大家的学习有帮助. 1.Scrapy爬虫框架 Scrapy是一个使用Python编程语言编写的爬虫框架,任何人都可以根据自己的需求进行修改,并且 ...

  9. bzoj2100 [Usaco2010 DEC]Apple Delivery苹果贸易

    题目描述 一张P个点的无向图,C条正权路.CLJ要从Pb点(家)出发,既要去Pa1点NOI赛场拿金牌,也要去Pa2点CMO赛场拿金牌.(途中不必回家)可以先去NOI,也可以先去CMO.当然神犇CLJ肯 ...

  10. HDU-2045 不容易系列之(3)—— LELE的RPG难题 找规律&递推

    题目链接:https://cn.vjudge.net/problem/HDU-2045 找规律 代码 #include <cstdio> long long num[51][2]; int ...