Vue过滤器

boy快快长大

已于 2023-04-14 16:46:13 修改

阅读量2.5k

点赞数 1

分类专栏：前端文章标签： vue.js javascript 前端

于 2023-01-14 16:12:23 首次发布

本文链接：https://blog.csdn.net/Blue_Pepsi_Cola/article/details/128685257

版权

前端专栏收录该内容

15 篇文章 0 订阅

订阅专栏

Vue过滤器

1. 概述
2. 全局过滤器与局部过滤器
- 2.1 过滤器参数
- 2.2 过滤器的串联
3.示例代码

1. 概述

在Vue.js中，过滤器主要用于文本的格式化，或者组件数据的过滤与排序等。从Vue2.0.0版本开始，内置的过滤器已经被删除，需要自己编写。

2. 全局过滤器与局部过滤器

过滤器的本质上是一个函数，与自定义指令相似，过滤器也分为全局过滤器和局部过滤器。全局过滤器使用Vue.filter()方法来注册，该方法接受两个参数，第一参数是过滤器的ID(即名字)，第二个参数是一个函数对象，过滤器要实现的功能在这个函数中定义。语法形式如下：
Vue.filter(id, [definition])
局部过滤器是在Vue实例的选项对象中使用filters选项来注册。
下面编写一个将字符串首字符转换为大写字母的全局过滤器。
在这里插入图片描述
如果换成局部过滤器，编写形式如下：

要注意的是：

当全局过滤器和局部过滤器重名时，会采用局部过滤器。
与自定义指令一样，全局过滤器可以在任何Vue实例的模板中使用，而局部过滤器只能在该实例绑定的视图中使用。
过滤器可以用在两个地方：双花括号插值和v-bind表达式使用时通过管道符|添加到表达式的尾部使用。

不要去尝试在其他指令的表达式中使用，没有结果还会报错。

2.1 过滤器参数

过滤器函数总是接受表达式的值作为第一个参数，如{{message|capitalize}},message的值将作为capitalize过滤器函数的第一个参数。过滤器的本质上是一个JavaScript函数，自然也可以接受多个参数。
下面编写一个为表达式的值添加前后缀的过滤器。
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <p>{{filename | format('vue',suffix)}}</p>
    </div>

    <script>
        Vue.filter('format', function (value, prefix, suffix) {
            if (!value) return '';
            value = value.toString();
            return prefix + "-" + value + "." + suffix;
        })

        var vm = new Vue({
            el: "#app",
            data: {
                filename: 'filters',
                suffix: 'js'
            }
        });
    </script>
</body>

</html>

filename的值作为format过滤器的第一个参数，普通字符串’vue’作为format过滤器的第二个参数，表达式suffix的值作为format过滤器的第三个参数，最终的输出结果为vue-filters.js
如果过滤器函数需要接受任意多个参数，可以使用ECMAScript6中引入的rest参数
在这里插入图片描述
当然，不建议把过滤器的功能做的很复杂，这违背了过滤器的初衷，毕竟在Vue.js中还有方法、计算属性、监听器等各种特性。

2.2 过滤器的串联

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <p>{{message | uppercase | reverse}}</p>
    </div>

    <script>
        Vue.filter('uppercase', function(value){
            if(!value) return '';
            value = value.toString();
            return value.toUpperCase();
        })

        Vue.filter('reverse',function(value){
            if(!value) return '';
            value = value.toString();
            return value.split('').reverse().join('');
        })

        var vm = new Vue({
            el : "#app",
            data:{
                message:'hello world'
            }
        });
    </script>
</body>
</html>

3.示例代码

<template>
  <div>
    <ul>
      <li>姓名:{{ emp.name }}</li>
      <!-- 过滤器filter: 用于修改 {{}} 中的值 -->
      <!-- {{ 值 | 过滤器 }} -->
      <li>性别:{{ emp.gender | sex }}</li>
      <li>婚姻:{{ emp.married | marry }}</li>
      <li>年龄:{{ emp.age | age_group }}</li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      emp: { name: "Lucy", gender: 0, married: true, age: 27 },
    };
  },
  // vfilter: 过滤器
  filters: {
    age_group(value) {
      if (value < 18) {
        return "少年";
      } else if (value <= 26) {
        return "青年";
      } else if (value <= 38) {
        return "中年";
      } else {
        return "其他..";
      }
    },
    marry(value) {
      return value ? "已婚" : "未婚";
    },
    // {{ 性别 | sex }}
    sex(value) {
      // value 就是 | 左侧的值
      // return 的值就是 过滤后的结果
      // 此处 0代表女 1代表男
      return ["女", "男"][value];
      // arr[序号]. 数组字面量是[]
      // 就会出现 [数组..][序号] 格式
    },
  },
};
</script>
<style lang="scss" scoped></style>