Vue中，过滤器的使用方法！

Posted 2022-11-19 webfy

        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是局部过滤器，只能在组件内使用；和全局过滤器一样可以传参，使用同时多个过滤器；

 

 

 如果大家喜欢的话，欢迎关注“前端伪大叔”我将为您不间断的分享前端学习知识！