Vue2——过滤器

已于 2024-02-29 20:28:15 修改
阅读量250 收藏
点赞数
分类专栏： vue2+vue3 文章标签： vue.js javascript 前端
于 2022-07-18 18:28:22 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mantou_riji/article/details/125856599
版权

文章目录

案例：将时间戳转换为我们能够读懂的形式

处理时间的第三方库：dayjs：https://cdn.bootcdn.net/ajax/libs/dayjs/1.11.3/dayjs.min.js

computer和methods的实现

<!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 type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript" src="../js/dayjs.min.js"></script>
</head>
<body>
    <div id="root">
        <h2>现在是：{{time}}</h2>
        <!-- 计算属性实现 -->
        <h2>现在是：{{fmtTime}}</h2>
        <!-- methods实现 -->
        <h2>现在是：{{getFmtTime()}}</h2>
    </div>

    <script type='text/javascript'>
    Vue.config.productionTip = false;

    new Vue({
        el:'#root',
        data: {
           time:1658137279155
        },
        computed:{
            fmtTime(){
                return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss')
            }
        },
        methods: {
            getFmtTime(){
                return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss')
            }
        },

    })
    </script>

</body>
</html>

过滤器定义

过滤器:

  • 定义:对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。
  • 语法:
  1. 注册过滤器:new vue({filters:{}})
  2. 使用过滤器:{{ xxx│过滤器名}}
    xxx会作为参数传递给过滤器，过滤器执行完毕之后返回结果会直接代替页面的{{ xxx│过滤器名}}进行显示。

过滤器使用

过滤器实现上述功能

<!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 type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript" src="../js/dayjs.min.js"></script>
</head>
<body>
    <div id="root">
        <h2>现在是：{{time}}</h2>
        <!--过滤器实现 -->
        <h2>现在是：{{time | timeFormater}}</h2>
    </div>

    <script type='text/javascript'>
    Vue.config.productionTip = false;

    new Vue({
        el:'#root',
        data: {
           time:1658137279155
        },
        filters:{
            // 公路起的本质就是一个函数
            timeFormater(value){
                return dayjs(value).format('YYYY-MM-DD HH:mm:ss')
            }
        }

    })
    </script>

</body>
</html>

过滤器实现过程

在这里插入图片描述

备注

过滤器传递多个参数

过滤器也可以接收额外参数,但是第一个参数一定是 | 前面的值。

<!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 type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript" src="../js/dayjs.min.js"></script>
</head>
<body>
    <div id="root">
        <h2>现在是：{{time}}</h2>
        <h2>现在是：{{time | timeFormater}}</h2>
        <h2>现在是：{{time | timeFormater('YYYY年MM月DD日')}}</h2>
    </div>

    <script type='text/javascript'>
    Vue.config.productionTip = false;

    new Vue({
        el:'#root',
        data: {
           time:1658137279155
        },

        filters:{
            // 过滤器的本质就是一个函数
            timeFormater(value,str="YYYY-MM-DD HH:mm:ss"){
                return dayjs(value).format(str)
            }
        }

    })
    </script>

</body>
</html>

在这里插入图片描述

多个过滤器也可以串联

格式:{{变量名 | 过滤器1| 过滤器2|...}}
过滤器1的结果作为过滤器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 type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript" src="../js/dayjs.min.js"></script>
  </head>
  <body>
    <div id="root">
      <h2>现在是：{{time}}</h2>
      <h2>现在是：{{time | timeFormater}}</h2>
      <h2>现在是：{{time | timeFormater('YYYY年MM月DD日') | mySlice()}}</h2>
    </div>

    <script type="text/javascript">
      Vue.config.productionTip = false;

      new Vue({
        el: "#root",
        data: {
          time: 1658137279155,
        },
        filters: {
          // 过滤器的本质就是一个函数
          timeFormater(value, str = "YYYY-MM-DD HH:mm:ss") {
            return dayjs(value).format(str);
          },
          mySlice(value) {
            return value.slice(0, 4);
          },
        },
      });
    </script>
  </body>
</html>

在这里插入图片描述

全局过滤器

在new vue({filters:{}})中定义的过滤器只能在该vue实例中使用，为了让其他vue实例也可以使用我们可以把过滤器定义成全局的：（在定义vue实例之前就定义好过滤器filter）
格式：

      Vue.filter('过滤器名字',function (过滤器参数){
         return 过滤器处理;
      })

eg：

<!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 type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript" src="../js/dayjs.min.js"></script>
  </head>
  <body>
    <div id="root">
      <h2>现在是：{{time}}</h2>
      <!--过滤器实现 -->
      <h2>现在是：{{time | timeFormater}}</h2>
      <h2>现在是：{{time | timeFormater('YYYY年MM月DD日') | mySlice()}}</h2>
    </div>

    <script type="text/javascript">
      Vue.config.productionTip = false;
    //   全局过滤器
      Vue.filter('mySlice',function (value){
         return value.slice(0, 4);
      })

      new Vue({
        el: "#root",
        data: {
          time: 1658137279155,
        },
        filters: {
          // 过滤器的本质就是一个函数
          timeFormater(value, str = "YYYY-MM-DD HH:mm:ss") {
            return dayjs(value).format(str);
          }
        },
      });
    </script>
  </body>
</html>

过滤的使用地方

  • 在插值语法中使用：前面的例子都是在插值语法中使用。
  • 在v-bind中使用
<!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 type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript" src="../js/dayjs.min.js"></script>
  </head>
  <body>
    <div id="root">
      <h2 :x="msg | mySlice"></h2>
    </div>

    <script type="text/javascript">
      Vue.config.productionTip = false;
    //   全局过滤器
      Vue.filter('mySlice',function (value){
         return value.slice(0, 4);
      })

      new Vue({
        el: "#root",
        data: {
          time: 1658137279155,
          msg:'hello 你好'
        },
        filters: {
          // 过滤器的本质就是一个函数
          timeFormater(value, str = "YYYY-MM-DD HH:mm:ss") {
            return dayjs(value).format(str);
          }
        },
      });
    </script>
  </body>
</html>

控制台：
在这里插入图片描述

过滤器的特点

并没有改变原本的数据,是产生新的对应的数据

过滤器总结

  1. 注册过滤器:Vue.filter(name,callback)（局部过滤器）或new Vue{filters:{}}（全局过滤器）
  2. 使用过滤器:{{ xxx│过滤器名}}或 v-bind:属性=“xxx|过滤器名"
    xxx会作为参数传递给过滤器，过滤器执行完毕之后返回结果会直接代替页面的{{ xxx│过滤器名}}进行显示。
_洋
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue2过滤器模糊查询方法
10-18
今天小编就为大家分享一篇vue2过滤器模糊查询方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue2中过滤器的用法详解
青春木鱼的博客
12-09 7268
过滤器是vue中的一个特性，作用是用于对文本进行格式化的作用。分为全局过滤器和私有过滤器(本地过滤器)2种。这篇文章介绍了Vue2中的过滤器filter使用方法及注意说明，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下。
【Web_Vue2】Vue中的过滤器（filter）
qq_45703937的博客
12-30 2814
Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化
vue 基础入门：vue 2的过滤器
薛定谔的猫
12-29 1114
在 filters 节点下定义的过滤器，称为“私有过滤器”，因为它只能在当前 vm 实例所控制的 el 区域内使用。过滤器仅在 vue 2.x 和 1.x 中受支持，在 vue 3.x 的版本中剔除了过滤器相关的功能。如果项目已经升级到了 3.x 版本的 vue，官方建议使用计算属性或方法代替被剔除的过滤器功能。如果使用的是 2.x 版本的 vue，则依然可以使用过滤器相关的功能。4. 如果全局过滤器和私有过滤器名字一致，此时按照“3. 在过滤器的形参中，可以获取到“2. 在过滤器函数中，
【Vue2.0源码学习】过滤器篇
一个前端开发者
07-04 937
过滤器在我们日常开发中应该算是一个非常常用的功能了，它经常会被用来格式化模板中的文本。过滤器可以单个使用，也可以多个串联一起使用，还可以传参数使用。那么在Vue中过滤器是如何工作的呢？其内部原理是怎样的？Vue又是如何识别出我们所写的过滤器的？接下来，我们将从源码角度出发，探究过滤器内部的工作原理，分析其工作流程，揭开它神秘的面纱。if(!也可以在创建Vue实例之前使用全局APIVue.filterif(!当全局过滤器和局部过滤器重名时，会采用局部过滤器。
Vue（3）之 过滤器
热门推荐
惟忆
01-28 5万+
1、过滤器简介 1.1、全局过滤器与局部过滤器 过滤器本质上是一个函数，与自定义指令类似。 全局过滤器 Vue.filter(id, [definition]) 局部过滤器 new Vue({ el: '#app', filters: { definition(value): { ... } } }) 案例：将字符串首字母转换为大写字母的全局过滤器 Vue.filter('capitalize', function (v
vue自定义filters过滤器
12-10
在项目中我们如果有多个filters，那么我怎么一次注册，全局可用，我们在项目里新建一个filters文件夹，如下，index.js是出口文件，readMore是一个对字符串做处理的过滤器 文件目录 下面贴上代码： //index.js // ...
vue中的过滤器实例代码详解
12-29
过滤器 1.过滤器规则 Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式...过滤器分为全局过滤器和本地过滤器,全局过滤器顾名思义就是所有Vue实例挂载的元素内都能使用，而本地过滤器则是指只有过滤器函数所在的
Vue filters过滤器的使用方法
12-29
本文实例为大家分享了Vue filters过滤器使用，供大家参考，具体内容如下 实例 先来看看一段代码理解下 html {{message | filters2| filters3(true,priceCount)}} js var app = new Vue({ el: #app, data: ...
Vue2.0-过滤器
qq_46199553的博客
08-29 286
2. 过滤器 过滤器（Filters）是 vue 为开发者提供的功能，常用于文本的格式化。过滤器可以用在两个地方：插值表达式 和 v-bind 属性绑定。 过滤器应该被添加在 JavaScript 表达式的尾部，由“管道符”进行调用，示例代码如下： <div id="app"> <p>message 的值是：{{ message | capi }}</p> </div> <script src="./lib/vue-2.6.12.js
vue2中的过滤器
yezi153的博客
10-26 1029
1.过滤器 使用场景:一个值需要经过处理后返回另一个结果 类似计算属性 计算之后返回计算的结果 // 全局过滤器写法 Vue.filter("过滤器名", (值) => {return "返回处理后的值"}) // 局部过滤器 filters: { 过滤器名(值) { return 处理后的结果 } } 2.计算属性 使用场景:一个变量的结果需要另外变量计算得来 特点:函数内变量变化,会自动计算结果返回,有缓存的特性 缓存:依赖项(计算属性的函数里面使用的变量)不变,多次调
Vue2.0开发之——Vue基础用法-过滤器(26)
我的博客
11-23 498
过滤器的基本用法使用Vue.filter定义全局过滤器使用全局过滤器格式化时间过滤器的其他用法过滤器的兼容性more在 filters 节点下定义的过滤器，称为“私有过滤器”，因为它只能在当前 vm 实例所控制的 el 区域内使用。如果希望在多个 vue 实例之间共享过滤器，则可以按照如下的格式定义全局过滤器。
vue2过滤器 filter
游小北的博客
07-27 2067
vue2过滤器 filter 的定义方式和使用规范，管道符的概念、全局与局部过滤器
VUE2的过滤器使用
m0_66051368的博客
03-05 143
<template> <div> <!-- 过滤器 {{ 值 | 过滤器 }} --> <!-- filters --> <!-- upper: 能够把值变大写 --> <div>{{ 'gaoda' | upper }}</div> <!-- pow: 计算次幂 --> <div>{{ 2 | pow(3) }}</div> .....
Vue2 过滤器的使用
future_1_的博客
06-14 749
Vue2 过滤器的使用
vue2中的(filters)局部过滤器与全局过滤器、过滤器传参、调用多个过滤器
qq_57423665的博客
04-19 1541
在filters节点下定义的过滤器，称为“私有过滤器”，因为它只能在当前 vm 实例所控制的 el 区域内使用。dayjs.min.js插件能够快速实现时间格式化，直接百度dayjs可以搜索或下载文件和查看官方文档；过滤器仅在 vue 2.x 和 1.x 中受支持，在 vue 3.x 的版本中剔除了过滤器相关的功能。如果全局过滤器和私有过滤器名字一致, 此时按照“就近原则”，调用的是”私有过滤器”；是vue为开发者提供的功能，常用于文本的格式化。
Vue2之filters过滤器基础与进阶
最新发布
如果相遇，那么你好哦~
09-14 958
Vue2的filters过滤器基础使用
Vue2过滤器
Raccon_的博客
01-24 202
Filters 于Vue3.0中已弃用，只能应用于Vue2.x 过滤器用于文本的格式化，可以用在插值表达式和v-bind属性绑定 过滤器应该添加在js表达式尾部，由’管道符’进行调用 <!-- 插值表达式中通过管道符调用capitalize过滤器，对message值处理 --> <p>{{ message | capitalize }}</p> <!-- v-bind中通过管道符调用formatId过滤器，对rawId值处理 --> &lt
vue2filter过滤器
07-25
Vue2中的过滤器（filter）是用于对文本进行格式化的功能。过滤器可以在插值表达式和v-bind属性绑定中使用。在Vue中，过滤器可以分为全局过滤器和私有过滤器（本地过滤器）两种类型。 全局过滤器是在Vue实例之间共享的过滤器。可以使用Vue.filter方法来定义全局过滤器，将其添加到Vue的过滤器列表中。全局过滤器可以在任何Vue实例的模板中使用。 私有过滤器是在当前Vue实例所控制的区域内使用的过滤器。私有过滤器是在Vue实例的filters节点下定义的。私有过滤器只能在当前Vue实例的模板中使用。 使用过滤器的基本语法是在文本表达式或属性绑定的末尾添加管道符（|），然后跟上过滤器的名称。例如，可以使用全局过滤器来格式化时间。 具体的使用方法和示例可以参考引用\[1\]、\[2\]和\[3\]中的内容。这些引用提供了关于过滤器的基本用法、全局过滤器的定义和示例，以及过滤器在Vue中的作用和注意事项。 #### 引用[.reference_title] - *1* *2* [Vue2.0开发之——Vue基础用法-过滤器(26)](https://blog.csdn.net/Calvin_zhou/article/details/127993274)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^koosearch_v1,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [Vue2中过滤器的用法详解](https://blog.csdn.net/sunyctf/article/details/127851578)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^koosearch_v1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值