vue 添加过滤器-以格式化日期为例
vue的filter和angular的pipe管道类似,是过滤器 官网:https://cn.vuejs.org/v2/guide/filters.html
添加格式化日期的全局过滤器
在main.js中
import moment from 'moment' // 定义全局过滤器--时间格式化
Vue.filter('format',function(val,arg){
if(!val) return;
val = val.toString()
return moment(val).format(arg)
})
若无需全局注册,可以直接在组件中定义
filters: {
format (val,arg) {
if(!val) return;
val = val.toString()
return moment(val).format(arg)
}
}
使用方法:组件中
<div>{{time | format('YYYY-MM-DD')}}</div>
vue 添加过滤器-以格式化日期为例的更多相关文章
- Angularjs在控制器(controller.js)的js代码中使用过滤器($filter)格式化日期/时间实例
Angularjs内置的过滤器(filter)为我们的数据信息格式化提供了比较强大的功能,比如:格式化时间,日期.格式化数字精度.语言本地化.格式化货币等等.但这些过滤器一般都是在VIEW中使用的,比 ...
- VUE:过滤器及日期格式化moment库
VUE:过滤器及日期格式化moment库 <!DOCTYPE html> <html> <head> <meta charset="UTF-8&qu ...
- django 过滤器、日日期格式化参数
转载:http://blog.csdn.net/xyp84/article/details/7945094 django1.4 html页面从数据库中读出DateTimeField字段时,显示的时间格 ...
- 第二章 Vue快速入门-- 25 过滤器-定义格式化时间的全局过滤器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- Vue自定义过滤器
gitHub地址: https://github.com/lily1010/vue_learn/tree/master/lesson05 一 自定义过滤器(注册在Vue全局) 注意事项: (1)全局方 ...
- vue 时间过滤器
过滤器:定义:对要显示的数据进行特定格式化后再显示(适用于一些简单逻辑的处理).语法:1.注册过滤器: Vue.filter(name ,callback)或new Vue{filters:{}}2. ...
- 第六十五篇:Vue的过滤器
好家伙, 过滤器,vue3取消了,只有vue2能用 1.过滤器 过滤器(Filters)是vue为开发者提供的功能,常用于文本的格式化. 过滤器可以用在两个地方:插值表达式和v-bind属性绑定. 过 ...
- Hibernate之HQL添加过滤器查询的用法
HQL查询过程中支持添加过滤器.使用步骤是这样的: 首先在要查询的实体对象的映射中使用<filter-def>标签配置过滤器,并在相对应的<class>标签中添加对应的< ...
- vue filter过滤器简单应用
vue中过滤器,用于一些常见的文本格式化,用 | 来操作. 过滤器可以用在两个地方: 1.在{{}}双花括号中插入值 2.v-bind表达式中使用 <!-- 在双花括号中 --> {{ m ...
随机推荐
- 让 Node.js 支持 ES6 的语法
为了让 Node.js 支持 ES6 的语法, 需要使用 Babel. 安装 es-checker 在使用 Babel 之前 , 我们先检测一下当前 node 对 es6 的支持情况. 在命令行下执行 ...
- dataGridViewX操作
private void dataGridView1_RowStateChanged(object sender, DataGridViewRowStateChangedEventArgs e) { ...
- angularjs 构建主页 内置过滤器、日期的格式化
从构建负责管理主屏幕的 MainController 开始.在这个 MainController 控制器内,只需设置一个每秒运转一次,同时更新一个局部作用域变量的延时 angular.module(' ...
- python跳一跳辅助学习
微信跳一跳辅助工具 准备工具 adb驱动 安卓手机 打开手机的调试模式 usb接好手机和电脑 PyCharm:全宇宙唯一一款专门用于Python开发IDE工具 实现原理: 获取手机的实时的截图 点击起 ...
- Bootstrap学习笔记(8)--响应式导航栏
说明: 1. 响应式导航栏,就是右上角的三道杠,点一下下方出现隐藏的导航栏.如果屏幕够大就显示所有的导航选项,如果屏幕小比如手机,就显示部分,剩下的放到三道杠里隐藏. 2. 外面套一个大的div,其实 ...
- python学习笔记(1)--遍历txt文件,正则匹配替换文字
遍历一个文件夹,把里面所有txt文件里的[]里的朗读时间删除,也就是替换为空. import os import re import shutil #os文件操作,re正则,shutil复制粘贴 pa ...
- alsamixer 在音频子系统的使用
alsamixer是Linux 音频架构ALSA工具的其中一个,用于配置音频的各个参数. alsamixer是基于文本下的图形界面的,可以通过键盘的上下键,左右键等,很方便地设置需要的音量,开关某个s ...
- 虚拟机和Docker的异同
[摘要]各种虚拟机技术开启了云计算时代:而Docker,作为下一代虚拟化技术,正在改变我们开发.测试.部署应用的方式.那虚拟机与Docker究竟有何不同呢? 首先,大家需要明确一点,Docker容器不 ...
- asp.net曲线图
highcharts的曲线图控件真的很强大,自己研究了下,做了一个简单的,给自己留个备忘,希望能帮到需要的朋友 Dome下载:http://files.cnblogs.com/linyijia/asp ...
- jQuery无刷新分页完整实例代码
在线演示地址如下: http://demo.jb51.net/js/2015/jquery-wsx-page-style-demo/ <!DOCTYPE html> <head> ...