Vue--过滤器(filters)

1.什么是过滤器？

我们转换格式来看，过滤器就是一个函数，传入值后再返回处理后的值

== 过滤器只能用在 v-bind表达式 和 插值表达式 中

2.过滤器的语法

过滤器分----全局过滤器 和 局部过滤器

• Vue.filter("过滤器名",(值) => {return "返回处理后的值"})
• filters:{"过滤器名字": (值) => {return "返回处理后的值"}}

现在我们来看一下过滤器的两个分类

全局过滤器:

下面代码写在mian.js中

// main.js
// 定义一个全局过滤器
Vue.filter("reverse", val => { return val.split("").reverse().join("") })

局部过滤器:

// App.vue
<template>
  <div>
      <!-- 过滤器：
      语法: {{值 | 过滤器名字}}

      全局过滤器：
      Vue.filter('过滤器名字'，(值) => {return "返回处理后的值"})

      局部过滤器:
      filters: {过滤器名字: (值) => {return "返回处理后的值"}}
       -->
      {{msg}}
      <p>{{msg | reverse}}</p>
      <p :title="msg | reverse">鼠标长时间停留</p>
  </div>
</template>

<script>
export default {
    data() {
        return {
            msg: 'Hello,Word'
        }
    },
// 定义一个局部过滤器
    filters: {
      reverse: msg => {return msg.toUpperCase()}  
    }
}
</script>

<style>

</style>

输出的值:

 注意:

1.如果局部过滤器和全局过滤器的名字一样，会使用局部过滤器

2.全局注册最好在main.js中注册, 一处注册到处使用

 3.vue过滤器-传参和多个过滤器

• 语法：

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

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

全局里面对过滤器传参：

// main.js
// 定义一个全局过滤器
Vue.filter("reverse", (val,a) => { return val.split("").reverse().join(a) })

局部过滤器里面添加过滤器：

// App.vue
<template>
  <div>
      <!-- 过滤器：
      语法: {{值 | 过滤器名字}}

      全局过滤器：
      Vue.filter('过滤器名字'，(值) => {return "返回处理后的值"})

      局部过滤器:
      filters: {过滤器名字: (值) => {return "返回处理后的值"}}
       -->
      {{msg}}
      <p>{{msg | reverse('|')}}</p>
      <p :title="msg | toUp |reverse">鼠标长时间停留</p>
  </div>
</template>

<script>
export default {
    data() {
        return {
            msg: 'Hello,Word'
        }
    },
// 定义一个局部过滤器
    filters: {
      toUp: msg => {return msg.toUpperCase()}  
    }
}
</script>

<style>

</style>

输出结果：

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