vue过滤器

过滤器的本质是一个有参数有返回值的方法。

过滤器的作用：实现数据的筛选、过滤、格式化。

过滤器使用：

语法：
　　<any>{{表达式 | 过滤器}}</any>

举个例子：
　　<h1>{{price | myCurrency}}</h1>

过滤器实质不改变原始数据，只是对数据进行加工处理后返回过滤后的数据再进行调用处理，这点要切记。

全局过滤器（任何组件都能用）

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>
</template>

<script>
export default {
    data(){
        return {
          str:'公众号“前端伪大叔”，欢迎大家前来关注！',
          str1:'qianduanweidashu'
        }
    }
}
</script>

总结：过滤器使用方法是‘|’直接使用，可以使用多个过滤器。

过滤器传参

main.js

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

App.vue

<template>
<div>{{str | Biography(9)}}</div>
</template>

<script>
export default {
    data(){
        return {
          str:'公众号“前端伪大叔”，欢迎大家前来关注！',
        }
    }
}
</script>

组件内过滤器

组件内过滤器，需要定义在filtets这个对象中，对象中定义的都是方法。

<template>
  <div>{{str | length(9) }}</div>
  <div>{{str1 | length(9) | toUpperCase}}</div>
</template>

<script>
export default {
     data() {
        return {
          str: "公众号“前端伪大叔”，欢迎大家前来关注！",
          str1:'qianduanweidashu'
        };
      },
      // 这里filters是这个对象
      filters: {
        // 自行输入长度
        length(e, num) {
          return e.slice(0, num) + "...";
        },
        // 转为大写
        toUpperCase(e) {
          return e.toUpperCase();
        }
      }
}
</script>

总结：filters是局部过滤器，只能在组件内使用；和全局过滤器一样可以传参，使用同时多个过滤器。

注意

1、 当有局部和全局两个名称相同的过滤器时候，会以就近原则进行调用，即：局部过滤器优先于全局过滤器被调用；

2、 一个表达式可以使用多个过滤器。过滤器之间需要用管道符“|”隔开。其执行顺序从左往右。