1. Toy模板网首页
  2. > Toy博客

Vue2中过滤器的用法详解

10月前 作者：儒雅的烤地瓜 分类：Toy博客 阅读(41) 违法举报

这篇具有很好参考价值的文章主要介绍了Vue2中过滤器的用法详解。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

目录

一、过滤器的概念

二、过滤器的使用位置

三、过滤器的分类

1、全局过滤器

2、本地过滤器

四、过滤器应用实例

1、使用过滤器实现省略号

2、使用过滤器处理时间戳

五、Vue3中已废弃过滤器 

过滤器是vue中的一个特性，作用是用于对文本进行格式化的作用。分为全局过滤器和私有过滤器(本地过滤器)2种。这篇文章介绍了Vue2中的过滤器filter使用方法及注意说明，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下。

Vue2中过滤器的用法详解

一、过滤器的概念

过滤器（Filters）是 vue 为开发者提供的功能，常用于文本的格式化。

过滤器可以用在两个地方：插值表达式和 v-bind 属性绑定。

过滤器应该被添加在 JavaScript 表达式的尾部，由“管道符”进行调用。

注意：在vue 1.0中有内置的过滤器，在2.0中去掉了内置过滤器，只有自定义过滤器 

二、过滤器的使用位置

过滤器只能应用在两个地方：双花括号插值和v-bind表达式(后者从 2.1.0+ 开始支持)。例如：

<!--在双花括号中使用 格式：{{值 | 过滤器的名称}}-->
<div>{{3 | addZero}}</div>
<!--在v-bind中使用 格式：v-bind:id="值 | 过滤器的名称"-->
<div v-bind:id="1 | addZero">11</div>

关于Vue2中的过滤器

👉 什么是vue的过滤器  

过滤器可以通俗理解成是一个特殊的方法，用来加工数据的。

比如枚举值可以使用过滤器：如 1 2 3 4 对应 成功 失败 进行中 已退回 比如价格后面跟个过滤器，将价格格式化成小数点两位 比如时间格式化等，又比如可以过滤聊天中的某些脏话。


👉 如何写过滤器？

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>过滤器</title>
    <!--引入vue.js-->
    <script src="node_modules/vue/dist/vue.js"></script>
    <script>
      window.onload = function () {
        // 定义全局过滤器
        Vue.filter("contentFilter", function (value) {
          //全局过滤器
          if (!value) {
            return "";
          }
          return value
            .toUpperCase()
            .replace("TMD", "*不许说脏话噢*")
            .replace("SB", "*不许说脏话噢*");
        });
        Vue.filter("addZero", function (value) {
          // 如果value的值小于10则在前面添加0然后返回，否则直接返回value值
          return value < 10 ? "0" + value : value;
        });
        // 构建vue实例
        new Vue({
          el: "#app",
          data: {
            content: "小伙子,TMD就是个sb",
            num1: 40,
            num2: 60,
            num3: 70,
          },
          filters: {
            //局部过滤器(本地过滤器)
            add(n1, n2, n3) {
              return n1 + n2 + n3;
            },
          },
        });
      };
    </script>
  </head>
  <body>
    <div id="app">
      <h3>过滤器基本使用</h3>
      <!--在双花括号中使用全局过滤器 格式：{{值 | 过滤器的名称}}-->
      <p>{{content|contentFilter}}</p>
      <!--在v-bind中使用全局过滤器 格式：v-bind:id="值 | 过滤器的名称"-->
      <p v-bind:id="1 | addZero">11</p>
      <h3>过滤器接收参数</h3>
      <p>{{ num1| add(num2,num3)}}</p>
    </div>
  </body>
</html>

运行结果：
Vue2中过滤器的用法详解

三、过滤器的分类

过滤器分为以下两种类型：

1、全局过滤器

多个 vue 实例之间共享过滤器，就可以定义全局过滤器

示例代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>过滤器</title>
    <!--引入vue.js-->
    <script src="node_modules/vue/dist/vue.js"></script>
    <script>
      window.onload = function () {
        // 定义全局过滤器
        Vue.filter("addZero", function (value) {
          // 如果value的值小于10则在前面添加0然后返回，否则直接返回value值
          return value < 10 ? "0" + value : value;
        });
        // 构建vue实例
        new Vue({
          el: "#my",
          data: {},
          // 方法
          methods: {},
        });
      };
    </script>
  </head>
  <body>
    <div id="my">
      <!--在双花括号中使用全局过滤器 格式：{{值 | 过滤器的名称}}-->
      <div>{{3 | addZero}}</div>
      <div>{{15 | addZero}}</div>
      <!--在v-bind中使用全局过滤器 格式：v-bind:id="值 | 过滤器的名称"-->
      <div v-bind:id="1 | addZero">11</div>
      <div v-bind:id="12 | addZero">15</div>
    </div>
  </body>
</html>

运行效果：

Vue2中过滤器的用法详解

关于全局过滤器的说明

如果希望在多个 vue 实例之间共享过滤器，则可以按照如下的格式定义全局过滤器

Vue2中过滤器的用法详解

2、本地过滤器

在 filters 节点下定义的过滤器，称为“私有过滤器”，因为它只能在当前 vm 实例所控制的 el 区域内使用。——要定义到 filters 节点下，本质是一个函数

 （1）在插值表达式或v-bind属性中使用 管道符

Vue2中过滤器的用法详解（2）在vue实例的 filters 节点中定义过滤方法 

Vue2中过滤器的用法详解

 

示例代码如下： 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>过滤器</title>
    <!--引入vue.js-->
    <script src="node_modules/vue/dist/vue.js" ></script>
    <script>
       window.onload=function(){
           // 定义全局过滤器
           Vue.filter("addZero",function(value){
               // 如果value的值小于10则在前面添加0然后返回，否则直接返回value值
               return value<10?"0"+value:value;
           });
           // 构建vue实例
           new Vue({
               el:"#my",
               data:{
               },
               // 方法
               methods:{

               },
               // 定义本地过滤器
               filters:{
                   roundNum:function(value){
                       // 四舍五入 小数点后保留两位
                       return value.toFixed(2);
                   },
                   roundNumWithPara:function(value,digit){
                       // 根据digit返回相应位数的小数
                       return value.toFixed(value,digit);
                   }
               }
           })
       }
    </script>
</head>
<body>
    <div id="my">
        <!--在双花括号中使用全局过滤器 格式：{{值 | 过滤器的名称}}-->
        <div>{{3 | addZero}}</div>
        <div>{{15 | addZero}}</div>
        <!--在v-bind中使用全局过滤器 格式：v-bind:id="值 | 过滤器的名称"-->
        <div v-bind:id="1 | addZero">11</div>
        <div v-bind:id="12 | addZero">15</div>
        <!--使用本地过滤器-->
        <div>原始值：3.1415926，过滤后的值：{{3.1415926 | roundNum}}</div>
        <!--保留小数点后3位-->
        <div>原始值：3.1415926，过滤后的值：{{3.1415926 | roundNumWithPara(3)}}</div>
    </div>
</body>
</html>

运行效果：

Vue2中过滤器的用法详解

💠 过滤器的注意点：

👉🏻 当全局过滤器和局部过滤器重名时，会采用局部过滤器。——即此时会按照“就近原则”，调用的是”私有过滤器“。

👉🏻 局部过滤器优先于全局过滤器被调用。

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

👉🏻 在过滤器函数中，一定要有 return 值。

👉🏻 在过滤器的形参中，可以获取到“管道符”前面待处理的那个值。

四、过滤器应用实例

1、使用过滤器实现省略号

代码示例如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>使用过滤器实现省略号</title>
    <!--引入vue.js-->
    <script src="node_modules/vue/dist/vue.js"></script>
    <script>
      window.onload = function () {
        // 构建vue实例
        new Vue({
          el: "#my",
          data: {
            msg: "hello world",
          },
          // 方法
          methods: {},
          // 定义本地过滤器
          filters: {
            // 显示省略号
            toShowEllipsis: function (value, len) {
              if (value === "" || value === undefined || value === null) return;
              if (value.length >= len) {
                var str = value.substr(0, len);
                return str + "...";
              } else {
                return value;
              }
            },
          },
        });
      };
    </script>
  </head>
  <body>
    <div id="my">
      <!--添加省略号    12345...-->
      <input type="text" v-model="msg" />
      {{msg | toShowEllipsis(6)}}
    </div>
  </body>
</html>

运行效果：

Vue2中过滤器的用法详解

2、使用过滤器处理时间戳

代码示例如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>使用过滤器处理时间戳</title>
    <!--引入vue.js-->
    <script src="node_modules/vue/dist/vue.js"></script>
    <script>
      window.onload = function () {
        // 构建vue实例
        new Vue({
          el: "#my",
          data: {
            curTime: 1546181790,
          },
          // 方法
          methods: {},
          // 定义本地过滤器
          filters: {
            // 处理时间戳  将时间戳转换成具体时间
            toTimeStamp: function (value) {
              //d   表示日期   t 日期和时间
              var d = new Date(value * 1000);
              return (
                d.getFullYear() +
                "-" +
                (d.getMonth() + 1) +
                "-" +
                d.getDate() +
                " " +
                d.getHours() +
                ":" +
                d.getMinutes() +
                ":" +
                d.getSeconds()
              );
            },
          },
        });
      };
    </script>
  </head>

  <body>
    <div id="my">
      <!--时间戳-->
      <p>当前时间：{{curTime | toTimeStamp }}</p>
    </div>
  </body>
</html>

运行效果：

Vue2中过滤器的用法详解

五、Vue3中已废弃过滤器 

👋🏻 注意：filter方法在vue3中已被废除 

vue3要精简代码，并且filter功能重复，filter能实现的功能，methods和计算属性基本上也可以实现。把filter这方面的vue源码给删掉，这样更加方便维护。

例如

使用 computed 实现

<template>
  <div id="app">
    <ul v-for="(item, index) in arr" :key="index">
      <li>快递公司:{{ item.deliverCompany }}</li>
      <!-- 使用计算属性 -->
      <li>运输状态:{{ computedText(item.expressState) }}</li>
    </ul>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        arr: [
          {
            deliverCompany: "京东快递",
            expressState: "1",
          },
          {
            deliverCompany: "顺丰快递",
            expressState: "2",
          },
          {
            deliverCompany: "中通快递",
            expressState: "3",
          },
          {
            deliverCompany: "邮政快递",
            expressState: "4",
          },
          {
            deliverCompany: "极兔快递",
            expressState: "5",
          },
          {
            deliverCompany: "某某快递",
            expressState: null,
          },
        ],
      };
    },
    computed: {
      computedText() {
        // 计算属性要return一个函数接收参数
        return function (state) {
          switch (state) {
            case "1":
              return "待发货";
              break;
            case "2":
              return "已发货";
              break;
            case "3":
              return "运输中";
              break;
            case "4":
              return "派件中";
              break;
            case "5":
              return "已收货";
              break;
            default:
              return "快递信息丢失";
              break;
          }
        };
      },
    },
  };
</script>

使用methods实现

<template>
  <div id="app">
    <ul v-for="(item, index) in arr" :key="index">
      <li>快递公司:{{ item.deliverCompany }}</li>
      <!-- 使用方法 -->
      <li>运输状态:{{ methodsText(item.expressState) }}</li>
    </ul>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        arr: [
          {
            deliverCompany: "京东快递",
            expressState: "1",
          },
          {
            deliverCompany: "顺丰快递",
            expressState: "2",
          },
          {
            deliverCompany: "中通快递",
            expressState: "3",
          },
          {
            deliverCompany: "邮政快递",
            expressState: "4",
          },
          {
            deliverCompany: "极兔快递",
            expressState: "5",
          },
          {
            deliverCompany: "某某快递",
            expressState: null,
          },
        ],
      };
    },
    methods: {
      methodsText(state) {
        switch (state) {
          case "1":
            return "待发货";
            break;
          case "2":
            return "已发货";
            break;
          case "3":
            return "运输中";
            break;
          case "4":
            return "派件中";
            break;
          case "5":
            return "已收货";
            break;
          default:
            return "快递信息丢失";
            break;
        }
      },
    },
  };
</script>

Vue2中过滤器的用法详解文章来源地址https://www.toymoban.com/news/detail-471102.html

到了这里，关于Vue2中过滤器的用法详解的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

  • Vue过滤器基本使用

    在Vue 2中，你可以使用 filters 选项来定义过滤器。以下在组件中定义和使用过滤器的简单例子： 1、app.vue 使用methods实现： 2、使用filters配合computed计算属性实现： 3、引入其他组件FilterFix.vue实现： app.vue FilterFix.vue main.js

    2024年02月09日
    浏览(56)
  • 【uniapp/uview】u-datetime-picker 选择器的过滤器用法

    【uniapp/uview】u-datetime-picker 选择器的过滤器用法

    引入 ：要求日期选择的下拉框在分钟显示时，只显示 0 和 30 分钟； 这里引入了 filter = \\\"timeFilter\\\" 作为其配置项； 还补充了开始年份从今年开始的写法，这样就可以按照要求来自定义了。

    2024年02月10日
    浏览(54)

  • Vue3 之 过滤器

    过滤器本质上是一个函数，与自定义指令类似。         全局过滤器      局部过滤器 案例：将字符串首字母转换为大写字母的全局过滤器  如果换成局部过滤器   注意： 当全局过滤器和局部过滤器重名，会采用局部过滤器 与自定义命令一样，全局过滤器可以在任何

    2024年02月05日
    浏览(38)
  • Vue中过滤器如何使用？

    Vue中过滤器如何使用？

    过滤器是对即将显示的数据做进⼀步的筛选处理，然后进⾏显示，值得注意的是过滤器并没有改变原来 的数据，只是在原数据的基础上产⽣新的数据。过滤器分全局过滤器和本地过滤器（局部过滤器）。 目录 全局过滤器 本地过滤器 过滤器传参 串联过滤器 下⾯定义⼀个全局

    2024年02月10日
    浏览(50)
  • 【Vue】收集表单数据 过滤器

    【Vue】收集表单数据 过滤器

    收集表单数据： 若： input type=\\\"text\\\"/ ,则v-model收集的是value值，用户输入的就是value值 若： input type=\\\"radio\\\"/ ,则v-model收集的是value值，且要给标签配置value值 若: input type=\\\"checkbox\\\"/ 1.没有配置input的value属性，那么收集的就是checked（勾选or未勾选，是布尔值） 2.配置input的value属性：

    2023年04月18日
    浏览(53)
  • JavaWeb过滤器(Filter)详解，是时候该把过滤器彻底搞懂了(万字说明)

    JavaWeb过滤器(Filter)详解，是时候该把过滤器彻底搞懂了(万字说明)

            注意：这篇文章很长，学习完后将会解决你对于过滤器(Filter)的所有疑惑，下面将通过理论和代码的结合来进行讲解演示.....    目录 基本介绍 过滤器原理 过滤器(Filter)接口 使用过滤器(Filter) 创建过滤器(Fliter) 使用过滤器(Filter) 配置过滤器(Filter)拦截路径  注解方式

    2024年02月02日
    浏览(41)
  • Fiddler过滤器 Filters 详解

    Fiddler过滤器 Filters 详解

    目录 前言： 一、 Hosts 过滤 （较常用） 二、Client Process 过滤（客户端进程过滤，通过配置只过滤/不过滤哪些进程的请求。用的不多） 三、Request Headers （根据请求头信息进行过滤。常用） 四、Breakpionts 设置断点（很少用，毕竟可以通过 bpu、bpafter以及改写规则js设置断点）

    2024年02月12日
    浏览(49)
  • Java 过滤器 @WebFilter 详解

    Java 过滤器 @WebFilter 详解

    @WebFilter 注解是JavaEE中的一种注解，用于标识一个类为过滤器(Filter)。过滤器用于对请求进行过滤和处理，可以在请求到达目标资源之前或之后执行一些操作。 使用**@WebFilter**注解可以将一个类声明为过滤器，并指定过滤器的名称、URL模式、Servlet名称等。 简化配置 ：不再需要

    2024年02月03日
    浏览(44)

  • 如何使用Vue模板的过滤器？

    你想要学习如何使用Vue模板的过滤器吗？ 首先，让我们来看看Vue模板是什么。Vue模板就是一个用来描述组件的结构和内容的HTML代码。在Vue模板中，我们可以使用过滤器来对数据进行处理和格式化。过滤器可以让你的数据变得更加美观、易读，也可以实现一些复杂的数据处理

    2024年02月08日
    浏览(37)
  • Spring Security内置过滤器详解

    Spring Security内置过滤器详解

    相关文章： OAuth2的定义和运行流程 Spring Security OAuth实现Gitee快捷登录 Spring Security OAuth实现GitHub快捷登录 Spring Security的过滤器链机制 Spring Security OAuth Client配置加载源码分析 根据前面的示例，我们已经知道启动时会加载18个过滤器，并且已经知道了请求会匹配到DefaultSecurityF

    2024年02月05日
    浏览(49)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包