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

我从后台获取到一个时间字段,是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. 【Linux开发】Linux及Arm-Linux程序开发笔记(零基础入门篇)

    Linux及Arm-Linux程序开发笔记(零基础入门篇) 作者:一点一滴的Beer http://beer.cnblogs.com/ 本文地址:http://www.cnblogs.com/beer ...

  2. SpringMVC 的Model值传到JSP页面中,用EL表达试取不到值

    解决方案 在jsp文件头 <%@ page isELIgnored="false" %>

  3. go net库

    1 使用Listen函数创建一个server ln, err := net.Listen("tcp", ":8080") if err != nil { // ...

  4. 数据库系统原理之SQL(四)

    数据库系统原理之SQL(四) 1. 数据更新 插入数据 INSERT-VALUES语句 #插入多条数据 insert [into] table_name (column_name,...) value ...

  5. PDFObject的使用(转)

    1.pdfobject.js官网:https://pdfobject.com/ 2.在html文件中引入这个文件,以pdfobject.min.js为例 1 <script type=" ...

  6. js倒计时跳转jquery插件版

    <script type="text/javascript" src="js/jquery1.91.min.js"></script> ...

  7. go & nssm

    参考 用go写windows系统服务

  8. 如何将DataTable转换成List<T>

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.D ...

  9. Vue之路由跳转 传参 aixos 和cookie

    一.路由跳转 1.1 项目的初始化 vue create m-proj   >>>创建vue项目 精简vue项目的 views 视图   About(基本是删除的) Home.(可以 ...

  10. c/c++基础篇之数据类型转换

    C/C++常见的数据类型转换 1.      常见的单类基本类型转换 (1)强制类型转换 如: int a=(int)(9.87)  结果a=9 char c=(char)(97)  结果为c=’a’ ...