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

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. OpenStack 与 大数据的融合

        此处是hadoop 2.7.2以前 Hadoop 预留的一个 HDFS 文件系统的接口. 可以通过修改这里 将数据源的读取改为 Swift. 也可以通过修改 MR 源码 将数据抽取部分变换成 ...

  2. 完毕乔布斯的梦想:一个免费wifi共享的乌托邦

    早在2007年推出iPhone时,乔布斯就提出这种如果:商业区与居民区的wifi路由器全民开放,实现与路人共享网络之便.能够想象,那算是一个wifi共享的乌托邦. 数年过去了,乔布斯的梦想依然没能全然 ...

  3. [Test] Easy automated testing in NodeJS with TestCafe

    Quickly get up and running with sensible automated testing scenarios written in ES6. Installing and ...

  4. POJ 3368 Frequent values(RMQ 求区间出现最多次数的数字的次数)

    题目链接:http://poj.org/problem? id=3368 Description You are given a sequence of n integers a1 , a2 , .. ...

  5. Android 最火的高速开发框架xUtils

    Github下载地址:https://github.com/wyouflf/xUtils xUtils简单介绍 xUtils 包括了非常多有用的Android工具. xUtils 最初源于Afinal ...

  6. Mysql信息数据库:Information_schema

    1. Information_schema information_schema是mysql的信息数据库. 通过该库能够查看mysql以下的数据库,表.权限等信息. 在数据库中会默认生成这个库.inf ...

  7. 一步一步跟我学习lucene(19)---lucene增量更新和NRT(near-real-time)Query近实时查询

    这两天加班,不能兼顾博客的更新.请大家见谅. 有时候我们创建完索引之后,数据源可能有更新的内容.而我们又想像数据库那样能直接体如今查询中.这里就是我们所说的增量索引.对于这种需求我们怎么来实现呢?lu ...

  8. thinkphp5项目--个人博客(二)

    thinkphp5项目--个人博客(二) 项目地址 fry404006308/personalBlog: personalBloghttps://github.com/fry404006308/per ...

  9. kotlin官方文档-1.0入门

    什么是Kotlin?   图片发自简书App Kotlin是JetBrains开发的基于JVM的语言,JetBrains想必大家应该很熟悉了,他们创造了很多强大的IDE,android studio谷 ...

  10. [JSOI2018]潜入行动 树形DP_复杂计数

    code #include <cstdio> #include <algorithm> #include <cstring> #include <string ...