Vue中，過濾器的使用方法！

        Vue.js允許自定義過濾器，可被用於一些常見的文本格式化。過濾器可以用在兩個地方：雙花括號插值和v-bind表達式。過濾器應該被添加在JavaScript表達式的尾部，由“管道”符號指示；（借官方的來介紹下，接下來直奔主題）

 

1、定義全局過濾器！任何組件都能用。

main.js中定義全局過濾器

//  定義長度為10的過濾器
Vue.filter('length10',(e) =>{
  return e.slice(0,10) + '...'
})
//  定義轉大小寫的過濾器
Vue.filter('toUpperCase',(e)=>{
 return  e.toUpperCase()
})

app.vue使用

// template
  <div>{{str}}</div>
  <div>{{str | length10}}</div>
  <div>{{str1 | length10 | toUpperCase}}</div>
  
//  script
data(){
    return {
      str:'公眾號“前端偽大叔”，歡迎大家前來關注！',
      str1:'qianduanweidashu'
    }
  }

總結：過濾器使用方法是‘|’直接使用，可以使用多個過濾器

 

2、過濾器傳參，了解一下 /笑哭

main.js

Vue.filter('Biography',(e,str1) =>{
     return e.slice(0,str1) + '...'
}

App.vue

//  template
<div>{{str | Biography(9)}}</div>
//  script
 data(){
    return {
      str:'公眾號“前端偽大叔”，歡迎大家前來關注！',
    }
  }

 

3、組件內過濾器

組件內過濾器，需要定義在filtets這個對象中，對象中定義的都是方法；

//  template
  <div>{{str | length(9) }}</div>
  <div>{{str1 | length(9) | toUpperCase}}</div>
  
//  script
 data() {
    return {
      str: "公眾號“前端偽大叔”，歡迎大家前來關注！",
      str1:'qianduanweidashu'
    };
  },
//  這里filters是這個對象
  filters: {
//  自行輸入長度
    length(e, num) {
      return e.slice(0, num) + "...";
    },
//  轉為大寫
    toUpperCase(e) {
      return e.toUpperCase();
    }
  }

總結：filters是局部過濾器，只能在組件內使用；和全局過濾器一樣可以傳參，使用同時多個過濾器；

 

 

 如果大家喜歡的話，歡迎關注“前端偽大叔”我將為您不間斷的分享前端學習知識！