Vue 全局过滤和局部过滤
程序员文章站
2022-03-21 18:38:44
局部过滤器(放在组件里) 使用: 全局过滤器(放main.js) 使用: 注:第一个参数默认为要过滤的值 当项目所用到的过滤器比较多时,把方法定义在一个js文件里面导出 /src/common/custom.js /src/main.js 然后在其他的.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 }}