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 表达式的尾部,由“|”符号指示: 过滤器可以让我们的代码更加优美,一般可以 ...
随机推荐
- Matlab与C++混合编程 1--在C++中调用自己写的matlab函数
在Visual Studio中使用C++中调用MATLAB程序 在matlab中可以通过mbuild工具将.m文件编译成dll文件供外部的C++程序调用,这样就可以实现matlab和C++混合编程的目 ...
- kafka学习(七)
跨集群数据镜像 跨集群镜像的使用场景 1.区域集群和中心集群 2.冗余,发生紧急情况下使用第二个集群,保存相同的数据. 3.云迁移 多集群架构 跨集群中心通信的一些现实情况 1.高延迟 2.有 ...
- 深入理解java:2. 多线程机制
引言 很多人都对其中的一些概念不够明确,如同步.并发等等,让我们先理清一些概念,以免产生误会. 多线程:指的是这个程序(一个进程)运行时,产生了不止一个线程. 并行与并发: 并行:多个cpu实例或者多 ...
- [Web 前端] 021 js 初识 Javascript
1. Javascript 简介 1.1 定位 JS 是运行在浏览器端的脚本语言 1.1.1 关于浏览器 JS 由浏览器解释执行 JS 通常被直接嵌入 HTML 页面 1.1.2 关于脚本语言 JS ...
- PyCharm控制台python shell 和 IPython shell的切换
1. IPython介绍 IPython 是一个 python 的交互式 shell,比默认的python shell 好用得多,支持变量自动补全,自动缩进,支持 bash shell 命令,内置了许 ...
- Ajax请求后台数据
一.前期准备 安装好XAMPP软件,并运行起来.本文代码是基于XAMPP开发环境,XAMPP是完全免费且易于安装的Apache发行版,其中包含MariaDB.PHP和Perl.XAMPP开放源码包的设 ...
- 第三方模块:gulp模块
一.Gulp的使用 1. 使用npm install gulp 下载gulp库文件 2. 在项目根目录下简历gulpfile.js文件 3. 重构项目的文件夹架构src目录放置源代码文件,dist ...
- 关于session的记录
在做DRP项目中的修改密码功能时,在JSP中先获取了之前登陆时设置的session中的用户账号,在调试的时候一直只是刷新页面,而没有重启页面,导致AJAX一直传输到相应的servlet失败,出现404 ...
- Django开发环境配置(win10)
开发工具 pycharm专业版 安装Django pip install Django==2.0 如果不带版本号,默认安装最新版本查看Django 查看版本: python -m django --v ...
- impala常用语法
参考:https://www.w3cschool.cn/impala/impala_alter_table.html