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 表达式的尾部,由“|”符号指示: 过滤器可以让我们的代码更加优美,一般可以 ...
 
随机推荐
- css简介和属性
			
CSS指的是层叠样式表(Cascading Style Sheets) 样式定义如何显示HTML元素,通常存储在样式表中. css使用方式 内联式 <!DOCTYPE html> < ...
 - Charles抓包过滤的四种方式
			
日常测试中,经常要抓包看请求的request,response是不是传的对,返回的字段值对不对,众多的请求中如何找到自己想要的请求,就需要过滤请求,Charles有4种过滤方式,用那一种都可以,看个人 ...
 - python 并发编程 多进程 队列
			
队列介绍 进程彼此之间互相隔离,要实现进程间通信(IPC),multiprocessing模块支持两种形式:队列和管道,这两种方式都是使用消息传递的 创建队列的类(底层就是以管道和锁定的方式实现) 制 ...
 - JAVA第四周总结与实验2
			
实验二 Java简单类与对象 一. 实验目的 (1) 掌握类的定义,熟悉属性.构造函数.方法的作用,掌握用类作为类型声明变量和方法返回值: (2) 理解类和对象的区别,掌握构造函数的使用,熟悉通过对象 ...
 - BusyBox  TFTP使用(转)
			
开发板上使用TFTP 帮助信息: BusyBox v1.13.3 (2009-03-25 15:48:45 CST) multi-call binary Usage: tftp [OPTION]... ...
 - 函数 FUNCTION
			
函数 FUNCTION 定义: 带名字的代码块,用于执行具体任务. 注意: 应给函数指定描述性名称,只是用小写字母和下划线. 函数代码块以 def 关键词开头,后接函数标识符名称和圆括号 (). 任何 ...
 - 7.golang的字符串 string
			
golang 字符串为不可变的量 ,字符串定义要使用双引号 package main import "fmt" func main() { var xx string = 'xxx ...
 - C++  delete仍可访问的问题
			
C++ delete和置为NULL 先上一段代码: class Object { public: explicit Object(int num) : m_num(num){} void functi ...
 - 微信小程序 IView List与Icon结合使用
			
wxml <i-cell-group> <i-cell title="测试" is-link> <i-icon slot= ...
 - MongoDB的使用学习之(六)MongoDB的高级查询之条件操作符
			
此文分为两点,主要是在第二点--java 语法,但是按顺序必须先把原生态的语法写出来 (还有一篇文章也是不错的:MongoDB高级查询用法大全(包含MongoDB命令语法和Java语法,其实就是我整理 ...