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

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. 洛谷 P2738 [USACO4.1]篱笆回路Fence Loops

    P2738 [USACO4.1]篱笆回路Fence Loops 题目描述 农夫布朗的牧场上的篱笆已经失去控制了.它们分成了1~200英尺长的线段.只有在线段的端点处才能连接两个线段,有时给定的一个端点 ...

  2. github git.exe位置

    C:\Users\yourname\AppData\Local\GitHub\PortableGit_69703d1db91577f4c666e767a6ca5ec50a48d243\bin\git. ...

  3. LeetCode 之 Merge Sorted Array(排序)

    [问题描写叙述] Given two sorted integer arrays nums1 and nums2, merge nums2 into nums1 as one sorted array ...

  4. nodejs微服务健康检查方案

    1. 前言 针对目前云平台方案,因为网络.主机状态等诸多因素,单台主机上的服务出现问题的几率大大增加.这就要求我们能够监控每台主机.每个微服务实例的健康状态.因此对于nodejs相关项目需要做相关的微 ...

  5. Caffe-python interface 学习|网络训练、部署、測试

    继续python接口的学习.剩下还有solver.deploy文件的生成和模型的測试. 网络训练 solver文件生成 事实上我认为用python生成solver并不如直接写个配置文件,它不像net配 ...

  6. IP地址的规划和设计方法(二)

    五,IP地址规划方法           (1)IP地址规划的基本步骤           网络地址规划须要按下面6步进行:           a)推断用户对网络与主机数的需求:           ...

  7. poj_2481,Cows,树状数组

    将e按从大到小排序,统计前i-1个中比 #include<iostream> #include<cstdio> #include<cstring> #include ...

  8. spring-data-redis 使用过程中需要注意的地方

    1.序列化问题 <!-- SDR默认采用的序列化策略有两种,一种是String的序列化策略,一种是JDK的序列化策略. StringRedisTemplate默认采用的是String的序列化策略 ...

  9. SSRS 报表 递归列表

    SSRS 报表 递归列表 .需要数据集合中两个必备字段 ID PID 1.添加数据集合,在图上标记的地方点击右键添加数据集合,根据需求自己编写 2.点击插入选项卡 中的 矩阵  有两种方式 一种是 矩 ...

  10. C# 使用指针将不同值类型赋值到字节数组中

    C#指针操作字节数组 Demo(以添加short类型的值为例): //bytes:目标字节数组; offset:目标在字节数组的位置; value:添加的类型值public static unsafe ...