Vue 全局过滤和局部过滤

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

filters: { //局部过滤器
      FormattingMoney:value=>{
        return value==null? '0' : value/100
      }
},

使用:{{money | FormattingMoney}}vue

全局过滤器(放main.js)

Vue.filter("ellipsis", (str, maxLen) => {
  return str.length > maxLen ? str.slice(0, maxLen) + "..." : str;
})

使用:{{title | ellipsis(20)}}code

注:第一个参数默认为要过滤的值orm


当项目所用到的过滤器比较多时,把方法定义在一个js文件里面导出
/src/common/custom.jsip

let FormattingMoney = value => {
  return value==null? '0' : value/100
}
export { FormattingMoney }

/src/main.jsit

import * as custom from './common/custom'

Object.keys(custom).forEach(key => {
  Vue.filter(key, custom[key])
})

而后在其余的.vue 文件中就可愉快地使用这些咱们定义好的全局过滤器了import

{{ money | FormattingMoney }}方法

相关文章
相关标签/搜索