在项目开发过程中,经常会用到过滤器,下面就来说说我用的用法

我从后台获取到一个时间字段,是2017-03-23的格式,但是我要的是年月日分开显示,那就要用到过滤器了

在没有用过滤器的时候,是这样的:

<b >{{item.IssueDate}}</b>
<div><span>{{item.IssueDate}},</span><span>{{item.IssueDate}}</span></div>

下面来写我们的过滤器

filters:{
//日期的处理(2017-05-23格式)
getDate(val,type){
if(type=='y'){//年
return val.slice(0,4);
}else if(type=='m'){//月
return val.slice(5,7);
}else if(type=="d"){//日
return val.slice(8,10);
}
}
}

  getData()的参数val其实就是我们获取到的日期的字段item.IssueDate,那下面,我们就要修改html,加上过滤器

<b>{{item.IssueDate | getDate('d')}}</b>
<div><span>{{item.IssueDate | getDate('y')}},</span><span>{{item.IssueDate | getDate('m')}}</span></div>

这样,如果我们获取到的时间是2017-03-23,经过过滤器的处理,现在显示的就应该是23,2017,03

好啦,这样一个过滤器就完成啦

  

vue使用过滤器 filters:{}的更多相关文章

  1. Vue学习之--------Vue中过滤器(filters)的使用(代码实现)(2022/7/18)

    1.过滤器 1.1 概念 过滤器: 定义:对要显示的数据进行特定格式化后再显示(适用于一些简单逻辑的处理). 语法: 1.注册过滤器:Vue.filter(name,callback) 或 new V ...

  2. vue中过滤器filters的使用

    组件内写法 filters:{ filter:function(data,arg1,arg2){ return .... } } 全局写法 filters('filter',function(data ...

  3. vue 过滤器filters的使用以及常见报错小坑(Failed to resolve filter)

    今天使用vue 过滤器中发现一个小坑,网上查到的大都是不正确的解决方法,故分享给大家: 原错误代码: // 过滤器 filter:{ FdishList:function(value){ if (!v ...

  4. 带你掌握Vue过滤器filters及时间戳转换

    摘要:Vue的filters过滤器是比较常见的一个知识点,下面我将结合时间戳转换的例子带你快速了解filters的用法. 本文分享自华为云社区<三分钟掌握Vue过滤器filters及时间戳转换& ...

  5. Vue自定义过滤器

    gitHub地址: https://github.com/lily1010/vue_learn/tree/master/lesson05 一 自定义过滤器(注册在Vue全局) 注意事项: (1)全局方 ...

  6. vue filter过滤器简单应用

    vue中过滤器,用于一些常见的文本格式化,用 | 来操作. 过滤器可以用在两个地方: 1.在{{}}双花括号中插入值 2.v-bind表达式中使用 <!-- 在双花括号中 --> {{ m ...

  7. vue:过滤器

    一.过滤器 过滤器是vue中的一个特性,作用是用于对文本进行格式化的作用. 注意:在vue 1.0中有内置的过滤器,在2.0中去掉了内置过滤器,只有自定义过滤器 二.使用位置 过滤器只能应用在两个地方 ...

  8. vue之过滤器

    在vue2.0以前的版本中vue内置的过滤器,但是因为缺乏纯JavaScript的灵活性,现在vue2.0版本中已经删除了内置过滤器,所以需要自己注册过滤器,我们可以定义本地(在某一个template ...

  9. vue的过滤器

    Vue.Js 提供了强大的过滤器API,能够对数据进行各种过滤处理,返回需要的结果 vue的过滤器一般在JavaScript 表达式的尾部,由“|”符号指示: 过滤器可以让我们的代码更加优美,一般可以 ...

随机推荐

  1. 第五周学习总结&第三次实验报告(String类的应用)

    第五周学习总结 1.学习了继承的相关知识点: (1) 继承的格式为class 子类 extends 父类{} (2) 继承实际上是通过子类去扩展父类的功能 (3) 一个子类只能继承一个父类,也就是说, ...

  2. HTTP请求状态码为400时的原因

    2019-11-30 出现这个请求无效说明请求没有进入后台服务器里 原因: (1)前端提交的字段名称或者字段类型和后台的实体类不一样 或者前端提交的参数跟后台需要的参数个数不一致,导致无法封装 (2) ...

  3. Oracle 查看一个数据库实例下面所有的表大小

    1. 因为 oracle有一些 lob字段 在user_extents 里面取出来的结果不是表名, 所以需要与user_lobs 表做关联查询才可以 本来想通过 关联查询来实现, 发现字表查询更简单 ...

  4. java.io.IOException: Cannot run program "/opt/jdk1.8.0_191/bin/java" (in directory "/var/lib/jenkins/workspace/xinguan"): error=2, No such file or directory

    测试jenkins构建,报错如下 Parsing POMs Established TCP socket on 44463 [xinguan] $ /opt/jdk1.8.0_191/bin/java ...

  5. 将从model中获得的数据传到js函数中

    刚遇到了一种情况,从controller中获得的model是一个集合,需要将这个集合循环放到标签中,并且需要为这些标签添加点击事件,每个值传入对应的点击事件函数中,由于model中的值是通过${ite ...

  6. 剑指Offer编程题(Java实现)——两个链表的第一个公共结点

    题目描述: 输入两个链表,找出它们的第一个公共结点. 思路一: 设 A 的长度为 a + c,B 的长度为 b + c,其中 c 为尾部公共部分长度,可知 a + c + b = b + c + a. ...

  7. 环境变量和Path环境变量

    环境变量 百度百科下的定义 一般是指在操作系统中用来指定操作系统运行环境的一些参数,如:临时文件夹位置和系统文件夹位置等. 环境变量是在操作系统中一个具有特定名字的对象,它包含了一个或者多个应用程序所 ...

  8. SCUT - G - 魔法项链 - 树状数组

    https://scut.online/contest/30/G 很久以前做的一个东西,当时是对R排序之后树状数组暴力统计当前区间的前缀和.每有一个元素出现在R的范围内,就解除他的同样元素的影响,在他 ...

  9. linux:服务器代理squid安装配置

    国内上往外的网站太慢,配了个香港代理服务器.如下:当前环境: centos系统.香港服务器IP(假设:59.188.71.11)检查squid是否安装:[root@localhost ~]# rpm ...

  10. Linux 解决E: Sub-process /usr/bin/dpkg returned an error code (1)错误

    在用apt-get安装软件时出现了类似于 install-info: No dir file specified; try --help for more information.dpkg: 处理 g ...