1 简介

　　过滤器（filter）是输送介质管道上不可缺少的一种装置,大白话，就是把一些不必要的东西过滤掉,过滤器实质不改变原始数据，只是对数据进行加工处理后返回过滤后的数据再进行调用处理，我们也可以理解其为一个纯函数。

　　Vue 允许你自定义过滤器，可被用于一些常见的文本格式化

　　ps: Vue3中已废弃filter，如果项目已经升级到了 3.x 版本的 vue，官方建议使用计算属性或方法代替被剔除的过滤器功能

2 语法

2.1 过滤器注册

　　1）Vue.filter(name,callback)

　　2）new Vue(

　　　　   filters:{}

　　   )

2.2 过滤器使用

　　1）{{xxx | 过滤器1名称 |过滤器2名称}}

　　2）v-bind:属性="xxx|过滤器1名称 | 过滤器2名称"

2.3 备注

　　过滤器会默认把过滤的数据作为参数，也可以自己添加参数

　　过滤器没有改变原来的数据，而是产生新的数据

3 示例

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8" />

        <title>过滤器</title>

        <script type="text/javascript" src="/js/vue.js"></script>

        <script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.10.6/dayjs.min.js"></script>

    </head>

    <body>

        <div id="root">

            <h2>时间</h2>

            <h3>当前时间戳：{{time}}</h3>

            <h3>转换后时间：{{time | timeFormater()}}</h3>

            <h3>转换后时间：{{time | timeFormater('YYYY-MM-DD HH:mm:ss')}}</h3>

            <h3>截取年月日：{{time | timeFormater() | mySlice}}</h3>

        </div>

    </body>

    <script type="text/javascript">

        Vue.config.productionTip = false

        // 全局过滤器

        Vue.filter('mySlice',function(value){

            return value.slice(0,11)

        })

        new Vue({

            el:'#root',

            data:{

                time:1626750147900,

            },

            // 局部过滤器

            filters:{

                timeFormater(value, str="YYYY年MM月DD日 HH:mm:ss"){

                    return dayjs(value).format(str)

                }

            }

        })

    </script>

</html>

Vue18 过滤器的更多相关文章

  1. ASP.NET Core 中文文档 第四章 MVC（4.3）过滤器

    原文:Filters 作者:Steve Smith 翻译:刘怡(AlexLEWIS) 校对:何镇汐 ASP.NET MVC 过滤器 可在执行管道的前后特定阶段执行代码.过滤器可以配置为全局有效.仅对控 ...

  2. ASP.NET Web API 过滤器创建、执行过程(二)

    ASP.NET Web API 过滤器创建.执行过程(二) 前言 前面一篇中讲解了过滤器执行之前的创建,通过实现IFilterProvider注册到当前的HttpConfiguration里的服务容器 ...

  3. ASP.NET Web API 过滤器创建、执行过程(一)

    ASP.NET Web API 过滤器创建.执行过程(一) 前言 在上一篇中我们讲到控制器的执行过程系列,这个系列要搁置一段时间了,因为在控制器执行的过程中包含的信息都是要单独的用一个系列来描述的,就 ...

  4. ABP(现代ASP.NET样板开发框架)系列之13、ABP领域层——数据过滤器（Data filters）

    点这里进入ABP系列文章总目录 基于DDD的现代ASP.NET开发框架--ABP系列之13.ABP领域层——数据过滤器(Data filters) ABP是“ASP.NET Boilerplate P ...

  5. AngularJS过滤器filter-时间日期格式-渲染日期格式-$filter

    今天遇到了这些问题索性就 写篇文章吧 话不多说直接上栗子 不管任何是HTML格式还是JS格式必须要在  controller 里面写 // new Date() 获取当前时间 yyyy-MM-ddd ...

  6. ASP.NET MVC5+EF6+EasyUI 后台管理系统（40）-精准在线人数统计实现-【过滤器+Cache】

    系列目录 上次的探讨没有任何结果,我浏览了大量的文章和个别系统的参考!决定用Cache来做,这可能有点难以接受但是配合mvc过滤器来做效果非常好! 由于之前的过滤器我们用过了OnActionExecu ...

  7. Hawk 4.2 过滤器

    过滤器可以在流中,过滤掉不符合条件的文档.当然也可勾选反向,此时只会留下不符合条件的文档. 空对象过滤器 最为常用,需要列名,可以过滤掉所有内容为Null,或字符串全部都是空字符的情况 数值范围过滤 ...

  8. 实现MVC自定义过滤器，自定义Area过滤器，自定义Controller，Action甚至是ViewData过滤器

    MVC开发中几种以AOP方式实现的Filters是非常好用的,默认情况下,我们通过App_Start中的FilterConfig来实现的过滤器注册是全局的,也就是整个应用程序都会使用的,针对单独的Fi ...

  9. 自定义jinja2 过滤器

    今天,我们要讲的是自定义jinja2 过滤器这个知识点,因为官方文档对此一代而过,讲得不够清楚,所以我们专门拿出来讲一下. 例子 例子写了两个自定义过滤器,一个是转换字典到字符串的过滤器,一个是返回当 ...

  10. 前端MVC学习总结（二）——AngularJS验证、过滤器、指令

    一.验证 angularJS中提供了许多的验证指令,可以轻松的实现验证,只需要在表单元素上添加相应的ng属性,常见的如下所示: <input Type="text" ng-m ...

随机推荐

  1. el-select实现下拉框触底加载更多

    当下拉框需要展示的数据有很多时,几千甚至上万条,一次性全部请求回来再按照特定格式比如 id-name 去处理数据的话,不论是从接口还是前端,这个性能都不是很好,会造成下拉框初次打开时响应很慢,影响用户 ...

  2. 32bit和64bit系统的区别，运行机制浅析

    32bit:内存的最大寻址空间是2^32=4G,就是说32位系统的处理器最大只支持到4G内存 64bit:内存的最大寻址空间是2^64,大于1亿GB,但是实际上支持不到那么大的内存,大概是2^40+ ...

  3. 还在为数据库事务一致性检测而苦恼？让Elle帮帮你，以TDSQL为例我们测测 | DB·洞见#7

    数据库用户通常依赖隔离级别来确保数据一致性,但很多数据库却并未达到其所表明的级别.主要原因是:一方面,数据库开发者对各个级别的理解有细微差异:另一方面,实现层面没有达到理论上的要求. 用户在使用或开发 ...

  4. tcp网络交互的理解 以及代码实现

    服务端 import socketserver = socket.socket(socket.AF_INET, socket.SOCK_STREAM)server.bind(("127.0. ...

  5. 如何使用C#在Excel中插入分页符

    在日常办公中,我们经常会用到Excel文档来帮助我们整理数据.为了方便打印Excel工作表,我们可以在Excel中插入分页符.各种处理软件一般都会自动按照用户所设置页面的大小自动进行分页,以美化文档的 ...

  6. 使用VMware安装Linux(CentOS)操作系统

    使用VMware安装CentOS 6.4 环境:Windows7 , VMware Workstation10, CentOS6.4 为什么选择CentOS ? 主流: 目前的Linux操作系统主要应 ...

  7. jupyter 数据显示设置

    #设置显示行数pd.set_option('display.max_row',None)#设置显示列数pd.set_option('display.max_column',None)#设置显示宽度pd ...

  8. 成功解决pycharm 的setting中的Error occurred when installing package 'Keras'

    成功解决pycharm 的setting中的Error occurred when installing package 'Keras' 刚刚开始学习python在安装package上碰了不上壁. M ...

  9. week_Last

    Andrew Ng 机器学习笔记 总结! 注:等下用xmind做一个树状图! 来回忆知识! 所以...树状图待补.... 最后,谢谢吴恩达老师!! 感谢吴恩达老师的无私付出!!

  10. Spring IOC官方文档学习笔记（一）之IOC容器概述

    1.IOC容器简介 (1) org.springframework.beans 与 org.springframework.context 这两个包是Spring IOC容器的基础,在org.spri ...