vue使用过滤器 filters:{}
在项目开发过程中,经常会用到过滤器,下面就来说说我用的用法
我从后台获取到一个时间字段,是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:{}的更多相关文章
- Vue学习之--------Vue中过滤器(filters)的使用(代码实现)(2022/7/18)
1.过滤器 1.1 概念 过滤器: 定义:对要显示的数据进行特定格式化后再显示(适用于一些简单逻辑的处理). 语法: 1.注册过滤器:Vue.filter(name,callback) 或 new V ...
- vue中过滤器filters的使用
组件内写法 filters:{ filter:function(data,arg1,arg2){ return .... } } 全局写法 filters('filter',function(data ...
- vue 过滤器filters的使用以及常见报错小坑(Failed to resolve filter)
今天使用vue 过滤器中发现一个小坑,网上查到的大都是不正确的解决方法,故分享给大家: 原错误代码: // 过滤器 filter:{ FdishList:function(value){ if (!v ...
- 带你掌握Vue过滤器filters及时间戳转换
摘要:Vue的filters过滤器是比较常见的一个知识点,下面我将结合时间戳转换的例子带你快速了解filters的用法. 本文分享自华为云社区<三分钟掌握Vue过滤器filters及时间戳转换& ...
- Vue自定义过滤器
gitHub地址: https://github.com/lily1010/vue_learn/tree/master/lesson05 一 自定义过滤器(注册在Vue全局) 注意事项: (1)全局方 ...
- vue filter过滤器简单应用
vue中过滤器,用于一些常见的文本格式化,用 | 来操作. 过滤器可以用在两个地方: 1.在{{}}双花括号中插入值 2.v-bind表达式中使用 <!-- 在双花括号中 --> {{ m ...
- vue:过滤器
一.过滤器 过滤器是vue中的一个特性,作用是用于对文本进行格式化的作用. 注意:在vue 1.0中有内置的过滤器,在2.0中去掉了内置过滤器,只有自定义过滤器 二.使用位置 过滤器只能应用在两个地方 ...
- vue之过滤器
在vue2.0以前的版本中vue内置的过滤器,但是因为缺乏纯JavaScript的灵活性,现在vue2.0版本中已经删除了内置过滤器,所以需要自己注册过滤器,我们可以定义本地(在某一个template ...
- vue的过滤器
Vue.Js 提供了强大的过滤器API,能够对数据进行各种过滤处理,返回需要的结果 vue的过滤器一般在JavaScript 表达式的尾部,由“|”符号指示: 过滤器可以让我们的代码更加优美,一般可以 ...
随机推荐
- tensorflow学习之tf.placeholder
placeholder函数相当于一个占位符,tf.placeholder(dtype, shape=None, name=None) dtype:数据类型.常用的是tf.float32,tf.floa ...
- note.js使用express创建项目的步骤以及ip和端口配置
1.安装express npm install -g express 2.创建项目 express -e 项目名称 3.打开cmd进入项目目录安装依赖 npm install 4.打开配置文件./bi ...
- 第十三周学习总结 Java的异常
java的核心思想 面向对象的编程思想 类和类的关系 类中成员的描述 对象创建 Java工具类 包装类 数学相关 日期相关 字符串相关 集合相关的类 考试机 学生 老师 --------------- ...
- Vue Element使用第三库icon图标
一:引入单设图标 1.打开 阿里icon,注册 >登录>图标管理>我的项目 2.新建项目 返回阿里icon首页,点进去你想要的icon库,因为没有批量导入购物车,所以一般情况下需要一 ...
- 快速查看php文档技巧
在php源码中看到注释中的相关链接后 Ctrl+鼠标,浏览器打开 将输入栏的“en”改为“zh”即可变为中文文档,其他语言类推
- 洛谷P1823 [COI2007] Patrik 音乐会的等待(单调栈+二分查找)
洛谷P1823 [COI2007] Patrik 音乐会的等待(单调栈+二分查找) 标签:题解 阅读体验:https://zybuluo.com/Junlier/note/1333275 这个题不是很 ...
- UML类图(一)
前言 最近在学习程杰老师的<大话设计模式>,觉得非常不错,就做了一些学习笔记和总结.如果对设计模式很感兴趣的,可以直接阅读书籍,相信会有更多的收获. 本人小菜一枚,如果理解的不对的还请多多 ...
- 剑指offer-用两个栈来实现一个队列-队列与栈-python
用两个栈来实现一个队列,完成队列的Push和Pop操作. 队列中的元素为int类型. 思路:使用两个栈,stackA 用来接收node stackB 用来接收 stackA 的出栈 # -*- cod ...
- asp.net后台cs中的JSON格式变量在前台Js中调用方法
//后台cs代码: using System; using System.Collections.Generic; using System.Linq; using System.Web; using ...
- make_smbcodepage - 为Samba创建代码页文件
总览 make_smbcodepage c|d 代码页 输入文件 输出文件 描述 这个工具是是Samba组件的一部分. 针对Samba 2.2的国际化功能,使用make_smbcodepage可以编译 ...