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

我从后台获取到一个时间字段,是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. 一个简单的dns服务器

    options { listen-on port 53 { any; }; listen-on-v6 port 53 { any; }; directory "/srv/app/named& ...

  2. android开发错误经验总结

    TextView: 1.textView.setText();参数如果直接传int类型,ide不会显示错误.但是运行会报错. 布局渲染: 1. <View android:background= ...

  3. spring扩展点之PropertyPlaceholderConfigurer

    原理机制讲解 https://leokongwq.github.io/2016/12/28/spring-PropertyPlaceholderConfigurer.html 使用时多个配置讲解 ht ...

  4. Nginx 的方向代理及配置

    最近有打算研读nginx源代码,看到网上介绍nginx可以作为一个反向代理服务器完成负载均衡.所以搜罗了一些关于反向代理服务器的内容,整理综合. 一  概述 反向代理(Reverse Proxy)方式 ...

  5. 使用idea搭建SSH

    一.新建项目 选中Spring strust2 hibernate 二.见项目根路径下的lib下的jar移动到WEB-INF下 移动 修改路径 在lib目录下导入[c3p0-0.9.5.2.jar]. ...

  6. MyBatis插入并返回id技巧

    1, 使用返回插入id的值,这个值即是当前插入的id

  7. 有序无序Ul->Li Ol->Li菜单,默认点击当前弹出下拉,再次点击收起下拉菜单(变形2 ---修饰)

    从上面可以看出,两个问题,第一:下拉出现的太快太突然,第二:再点击下一个下拉菜单的时候,上一个不会闭合,针对这两个问题,接下来会一 一解决. 解决下拉太快: js中有个jquery效果,有一个效果是j ...

  8. 高性能迷你React框架anujs1.1.3发布

    anujs现在只差一个组件(mention)就完全支持阿里的antd UI库了.一共跑通346个测试, 应该是全世界最接近官方React的迷你框架了. 以后的工作就是把React16的一些新特性支持了 ...

  9. 通过编写串口助手工具学习MFC过程——(八)遇到的一些问题

    通过编写串口助手工具学习MFC过程 因为以前也做过几次MFC的编程,每次都是项目完成时,MFC基本操作清楚了,但是过好长时间不再接触MFC的项目,再次做MFC的项目时,又要从头开始熟悉.这次通过做一个 ...

  10. js的抖动及防抖和节流

     js的抖动 在 js 中 改变窗口大小 & 上下滚动滚动条 & 反复向输入框中输入内容 ... , 如果绑定了相应的事件 , 这些事件的触发频率非常高, 严重影响用户体验和服务器的性 ...