vue基础-过滤器(Filters)

目的: 转换格式, 过滤器就是一个函数, 传入值返回处理后的值(由管道符调用)

Vue中的过滤器场景

        过滤器只能用在, <插值表达式和v-bind表达式>

例子：全局定义

Vue.filter("过滤器名", (值) => {return "返回处理后的值"}
字母转大写, 输入"hello", 输出"HELLO"

Vue.filter('filterA',(val) =>val.toUpperCase())
Vue.config.productionTip =false

<template>
  <div>
    <h5>原始数据:{
   
   { message }}</h5>
    <h5>使用全局过滤器实现数据大写:{
   
   {message | filterA}}</h5>
  </div>
</template>

<script>
export default {
  data(){
    return{
      message:'hello'
    }
  }
};
</script>

局部定义

filters: {过滤器名字: (值) => {return "返回处理后的值"}
第一个字符小写, "输入HELLO", 输出"hELLO"

语法:

• 过滤器传参: vue变量 | 过滤器(实参)

• 多个过滤器: vue变量 | 过滤器1 | 过滤器2

<template>
  <div>
    <h5>原始数据:{
   
   { message }}</h5>
    <a href="#" :title="message | filterB">使用局部过滤器实现数据大写</a>
      //可以传多个过滤器
    <h5>多个过滤器使用:{
   
   {message | filterA |filterC}}</h5>
    <p>原来的样子: {
   
   { msg }}</p>
    <!-- 1.
      给过滤器传值
      语法: vue变量 | 过滤器名(值)
     -->
    <p>使用翻转过滤器: {
   
   { msg | reverse('|') }}</p>
    <!-- 2.
      多个过滤利使用
      语法: vue变量 | 过滤器1 | 过滤器2
     -->
    <p :title="msg | toUp | reverse('|')">鼠标长停</p>
  </div>
</template>

<script>
export default {
  filters: {
    filterB(val){
      return val.toUpperCase()
    },
    filterC(val){
      return val.charAt(0).toLowerCase() + val.slice(1)
      //字符串拼接方法 将第一个首字母改为小写 后面是大写
    }
  },
  data(){
    return{
      message:'hello'
    }
  }
};
</script>

总结: 过滤器可以传参, 还可以对某个过滤器结果, 后面在使用一个过滤器

 过滤器注意点

1. 要定义到filter节点上，本质是一个函数
2. 在过滤器函数中，一定要有return值
3. 在过滤器的形参中，就可以获取到管道符前面待处理的那个值
4. 如果全局过滤器和私有过滤器名字一致，此时按照“就近原则”调用的是私有过滤器