欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Vue 全局过滤和局部过滤

程序员文章站 2022-10-18 19:50:45
局部过滤器(放在组件里) 使用: 全局过滤器(放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 }}