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个方面. 代码演示如下: <! ...
随机推荐
- Thunderbird导出邮件为PDF文件
一般如果在windows下,可以通过打印的方式,生成一个PDF文件,可以完成此任务. 而今天在linux下采取此方式,生成的PDF文件居然是空白.原因未知. 而Thunderbird并未提供该功能,这 ...
- Android中的AsyncTask异步任务的简单实例
在 Android中的AsyncTask异步任务的简介 一文中.已经对 安卓 异步任务操作做了简单的介绍.这里,直接将上文中的异步任务做了一个实例.实现异步操作更新UI线程,相比开启子线程更新来说逻辑 ...
- nj10---文件读取
介绍:fs模块是文件操作的封装,它提供了文件的读取,写入,更名,删除,遍历目录,链接POSIX文件系统操作.与其他模块不同的是,fs模块中所有的操作都提供了异步和同步两个版本,例如读取文件内容函数异步 ...
- 自定义标签 Unable to find setter method for attribute
变量的首字母不能大写 http://blog.csdn.net/looksun/article/details/7690601
- django 笔记15 ajax系列
参考 http://www.cnblogs.com/wupeiqi/articles/5703697.html # 原生操作# jQuery操作# 伪Ajax操作# XMLHttpReques 伪aj ...
- [JZOJ4024] [佛山市选2015] 石子游戏 解题报告
Description Alice 和 Bob 总喜欢聚在一起玩游戏(T_T),今天他(她)们玩的是一款新型的取石子游戏.游戏一开始有N堆石子,Alice 和 Bob 轮流取出石子.在每次操作 ...
- display的几种常用取值
display的取值有很多种,下面列出比较常用的几种取值,还有其它的少用的值没有列出来: 1.none 此元素不会被显示,并且不占据页面空间,这也是与visibility:hidden不同的地方,设置 ...
- 基于JS的身份证验证(完整版)
var Wi = [ 7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2, 1 ]; // 加权因子 var ValideCode = [ 1, 0 ...
- caffe模型各层数据和参数可视化
先用caffe对cifar10进行训练,将训练的结果模型进行保存,得到一个caffemodel,然后从测试图片中选出一张进行测试,并进行可视化. In [1]: #加载必要的库 import nump ...
- UI Framework-1: Browser Window
Browser Window The Chromium browser window is represented by several objects, some of which are incl ...