010.过滤器

一、过滤器{filter}的概念

过滤器用于将一些不必要的东西过滤掉。

  • 其本质上不改变 ➾ 原始数据,只是对数据进行处理后,返回过滤后的数据再进行调用处理。
  • 🔔提示
    1. 可以理解过滤器为一个「纯函数」。
    2. 在Vue3中,已废弃过滤器。
    3. 过滤器被添加在JavaScript 表达式的尾部,由管道符{|}指示。

⑴过滤器使用位置

1.应用于双花括号中

1
<div>{{ 属性名 | 函数名}}</div>

2.应用于v-bind表达式中

1
<div v-bind:id="属性名 | 函数名"></div>

3.过滤器串联

1
<div>{{ 属性名 | 函数名1 | 函数名2 | ...}}</div>
1
<div v-bind:id="属性名 | 函数名1 | 函数名2 | ..."></div>
  • 🔥案例

    • 将message的作为参数,传入A过滤器进行过滤,A过滤器过滤完的数据返回值会传入B过滤器。

      1
      {{ message | filterA | filterB }}

⑵过滤器分类

过滤器分为两种{局部过滤器全局过滤器}。所有的过滤器都是 ➾ 函数,并且参数为 ➾ 要过滤的数据

1.全局过滤器

全局过滤器,可以在每个Vue实例中使用。

  • 语法

    1
    <div>{{ 属性名 | 函数名1(参数1, 参数2, ...) | 函数名2(参数1, 参数2, ...)  | ...}}</div>
    1
    <div v-bind:id="属性名 | 函数名1(参数1, 参数2, ...) | 函数名2(参数1, 参数2, ...)  | ..."></div>
    • 🔔提示
      1. 一个表达式可以使用多个过滤器。
      2. 过滤器间需用管道符{|}隔开,其执行顺序 ➾ 从左往右
    1
    2
    3
    4
    5
    6
    7
    Vue.filter('函数名', function(value, 参数1, 参数2, ...) {
    return value
    })

    new Vue({
    ...
    })
    • 🔔提示
      1. value
        • |前面的值 ➾ 属性名,它相当于第一个参数。
      2. 在过滤器函数中,一定要返回一个值。
        • 📌原因
          • 其是我们对格式处理后的结果。
      3. 当为一个数据绑定一个过滤器后,
        • 每一次渲染这个数据时,都会调用相应过滤器的函数。
  • 🔥案例

    • 通过过滤器来判断 ➾ 

      1. 列表中,每一项的显示颜色。

      2. 列表中,每一项的内容显示“已关注”“未关注”。

        1
        2
        3
        4
        5
        <div id="box">
        <div v-for="item in list">
        <p :class="item | filtersColor">{{item | filtersContent}}</p>
        </div>
        </div>
        1
        2
        3
        4
        5
        6
        7
        .red {
        color: red;
        }

        .grey {
        color: grey;
        }
        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        12
        13
        14
        15
        16
        17
        18
        19
        // 当value改变的时候,他会执行这个函数
        Vue.filter('filtersColor', function(value) {
        return value.type != 0 ? "red" : "grey"
        })

        Vue.filter('filtersContent', function(value) {
        return value.type != 0 ? "已关注" : "未关注"
        })

        var vm = new Vue({
        el: "#box",
        data: {
        list: [
        { type: 0 },
        { type: 1 },
        { type: 0 },
        { type: 0 }]
        }
        })

        gif-231220113205

2.局部过滤器

局部过滤器,只能在当前Vue实例中使用。

  • 语法

    1
    <div>{{ 属性名 | 函数名1(参数1, 参数2, ...) | 函数名2(参数1, 参数2, ...)  | ...}}</div>
    1
    <div v-bind:id="属性名 | 函数名1(参数1, 参数2, ...) | 函数名2(参数1, 参数2, ...)  | ..."></div>
    • 🔔提示
      1. 一个表达式可以使用多个过滤器。
      2. 过滤器间需用管道符{|}隔开,其执行顺序 ➾ 从左往右
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    new Vue({
    el: "#box",
    data: {
    ...
    },
    filters: {
    函数名(value, 参数1, 参数2, ...) {
    return 处理结果
    }
    }
    })
    • 🔔提示
      1. value
        • |前面的值 ➾ 属性名,它相当于第一个参数。
      2. 在过滤器函数中,一定要返回一个值。
        • 📌原因
          • 其是我们对格式处理后的结果。
      3. 当为一个数据绑定一个过滤器后,每一次渲染这个数据时,都会调用相应过滤器的函数。
  • 🔥案例

    1
    2
    3
    4
    <div id="box">
    <div>{{name | capitalize}}</div>
    <button @click="handleClick">点击</button>
    </div>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    new Vue({
    el: "#box",
    data: {
    name: '糖丸'
    },
    methods: {
    handleClick() {
    this.name = '糖宝'
    }
    },
    filters: {
    // 当value改变的时候,他会执行这个函数
    capitalize(value) {
    return value + '爱吃糖!'
    }
    }
    })

    gif-231220105636

二、🪄总结

  1. 当全局过滤器局部过滤器重名时,会采用局部过滤器。
  2. 全局过滤器局部过滤器使用的更广泛一些。