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 }}


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM