Vue 全局过滤和局部过滤
局部过滤器(放在组件里)
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 全局过滤和局部过滤的更多相关文章
- 详解vue全局组件与局部组件使用方法
这篇文章主要为大家详细介绍了vue全局组件与局部组件的使用方法,具有一定的参考价值,对此有需要的朋友可以参考学习下.如有不足之处,欢迎批评指正. vue全局/局部注册,以及一些混淆的组件main.js ...
- vue全局注册与局部注册的写法
vue全局注册是每个实例化的vue都可以使用,而局部则是实例化注册的那个可以用.举个例子,看看写法: <div id="app"> <p>页面载入时,inp ...
- vue全局组件和局部组件
1.全局注册组件 Vue.componet('name',{ template:'<div></div>', data(){ retrun {} } }) 使用了以上这种方式注 ...
- vue -全局组件和局部组件
1.全局组件:Vue.component('标签名', 构造器名) Vue.component('mycpn', cpnC) 注:这种注册组件的方式是全局组件,可以在多个Vue实例中使用. 2.局部组 ...
- vue全局组件与局部组件
<!DOCTYPE html> <html> <head> <title></title> </head> <script ...
- vue货币格式化组件、局部过滤功能以及全局过滤功能
一.在这里介绍一个vue的时间格式化插件: moment 使用方法: .npm install moment --save. 2 定义时间格式化全局过滤器 在main.js中 导入组件 import ...
- vue.js中的全局组件和局部组件
组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素, Vue.js 的编译器为它添加特殊功能. 组件的使用有三 ...
- Vue 组件&组件之间的通信 之全局组件与局部组件
在上篇博客中介绍了组件,在注册组件的简写中就用到了全局组件 //注册组件的简写方式 Vue.component('my-componenta',{ template:'<h2>hello ...
- vue.js 组件-全局组件和局部组件
这两天学习了Vue.js 感觉组件这个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记. 首先Vue组件的使用有3个步骤,创建组件构造器,注册组件,使用组件3个方面. 代码演示如下: <! ...
随机推荐
- MATLAB曲线拟合
转自原文 MATLAB曲线拟合 曲线拟合 实例:温度曲线问题 气象部门观测到一天某些时刻的温度变化数据为: t 0 1 2 3 4 5 6 7 8 9 10 T 13 15 17 14 16 19 2 ...
- 逆向project第003篇:跨越CM4验证机制的鸿沟(上)
一.前言 <冠军足球经理>系列作为一款拟真度极高的足球经营类游戏.赢得过无数赞誉,而CM4可以说是这个传奇的起点. 可是在游戏安装过程中.当用户输入完序列号之后.程序并不会对用户的输入进行 ...
- css 清楚浮动的8种方式
清除浮动是每个 web前台设计师必须掌握的机能. css清除浮动大全,共8种方法. 浮动会使当前标签产生向上浮的效果,同一时候会影响到前后标签.父级标签的位置及 width height 属性.并且相 ...
- zzulioj--1807--小明在努力(递归)
1807: 小明在努力 Time Limit: 1 Sec Memory Limit: 128 MB Submit: 95 Solved: 35 SubmitStatusWeb Board Des ...
- Python: PS 滤镜--碎片特效
本文用 Python 实现 PS 滤镜中的碎片特效,这个特效简单来说就是将图像在 上,下,左,右 四个方向做平移,然后将四个方向的平移的图像叠加起来做平均.具体的效果图可以参考之前的博客 http:/ ...
- PostgreSQL Replication之第四章 设置异步复制(4)
4.4 基于流和基于文件的恢复 生活并不总只是黑色或白色:有时也会有一些灰色色调.对于某些情况下,流复制可能恰到好处.在另一些情况下,基于文件复制和PITR是您所需要的.但是也有许多情况下,您既需要流 ...
- PostgreSQL Replication之第一章 理解复制概念(2)
1.2不同类型的复制 现在,您已经完全地理解了物理和理论的局限性,可以开始学习不同类型的复制了. 1.2.1 同步和异步复制 我们可以做的第一个区分是同步复制和异步复制的区别. 这是什么意思呢?假设我 ...
- 《剑指offer》栈的压入、弹出序列
一.题目描述 输入两个整数序列,第一个序列表示栈的压入顺序,请判断第二个序列是否为该栈的弹出顺序.假设压入栈的所有数字均不相等.例如序列1,2,3,4,5是某栈的压入顺序,序列4,5,3,2,1是该压 ...
- c#DataGridView复制粘贴删除功能
//可在dgv中复制.剪切.粘贴.删除数据 /// <summary> /// DataGridView复制 /// </summary> /// <param name ...
- CF732F Tourist Reform(边双联通)
题意 在一张有向图中,设 ri 为从点 i 出发能够到达的点的数量. 定义有向图的“改良值”为 ri 的最小值. 现给出一张无向图,要求给每条边定一个方向,使产生的有向图“改良值”最大. 输出 最大改 ...