浅谈Angular4中常用管道


Posted in Javascript onSeptember 27, 2017

通常我们需要使用管道实现对数据的格式化,Angular4中的管道和之前有了一些变化,下面说一些常用的管道。

一、大小写转换管道

  • uppercase将字符串转换为大写
  • lowercase将字符串转换为小写
<p>将字符串转换为大写{{str | uppercase}}</p>
str:string = 'hello'

页面上会显示

将字符串转换为大写HELLO

二、日期管道

date。日期管道符可以接受参数,用来规定输出日期的格式。

<p>现在的时间是{{today | date:'yyyy-MM-dd HH:mm:ss'}}</p>
today:Date = new Date();

页面上会显示现在的时间是2017年05月08日10时57分53秒

三、小数管道

number管道用来将数字处理为我们需要的小数格式

接收的参数格式为{最少整数位数}.{最少小数位数}-{最多小数位数}

其中最少整数位数默认为1

最少小数位数默认为0

最多小数位数默认为3

当小数位数少于规定的{最少小数位数}时,会自动补0

当小数位数多于规定的{最多小数位数}时,会四舍五入

<p>圆周率是{{pi | number:'2.2-4'}}</p>
pi:number = 3.14159;

页面上会显示

圆周率是03.1416

四、货币管道

currency管道用来将数字转换为货币格式

<p>{{a | currency:'USD':false}}</p>
<p>{{b | currency:'USD':true:'4.2-2'}}</p>
a:number = 8.2515
b:number = 156.548

页面上将显示

USD8.25

0156.55这里的′USD′是美元UnitedStatesdollar的缩写,当为false时不显示符,当为true时,则显示$符。后面的规定小数位数的参数和上面介绍的一样。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript 类与静态类的实现
Apr 01 Javascript
Eclipse下jQuery文件报错出现错误提示红叉
Jan 13 Javascript
JavaScript中奇葩的假值示例应用
Mar 11 Javascript
轻松掌握JavaScript中的Math object数学对象
May 26 Javascript
JQuery Ajax 异步操作之动态添加节点功能
May 24 jQuery
js字符限制(字符截取) 一个中文汉字算两个字符
Sep 12 Javascript
详解vue.js之props传递参数
Dec 12 Javascript
vue 动态改变静态图片以及请求网络图片的实现方法
Feb 07 Javascript
vue.js与后台数据交互的实例讲解
Aug 08 Javascript
js获取form表单中name属性的值
Feb 27 Javascript
mpvue微信小程序的接口请求fly全局拦截代码实例
Nov 13 Javascript
Vue快速实现通用表单验证功能
Dec 05 Javascript
深入理解Vue.js源码之事件机制
Sep 27 #Javascript
js截取字符串功能的实现方法
Sep 27 #Javascript
详解node+express+ejs+bootstrap构建项目
Sep 27 #Javascript
Three.js基础学习之场景对象
Sep 27 #Javascript
vue父组件中获取子组件中的数据(实例讲解)
Sep 27 #Javascript
Web开发使用Angular实现用户密码强度判别的方法
Sep 27 #Javascript
基于复选框demo(分享)
Sep 27 #Javascript
You might like
用PHP制作静态网站的模板框架(三)
2006/10/09 PHP
php生成局部唯一识别码LUID的代码
2012/10/06 PHP
Apache中php.ini的设置方法
2013/02/28 PHP
javascript日期对象格式化为字符串的实现方法
2014/01/14 Javascript
jQuery实现鼠标悬停3d菜单展开动画效果
2017/01/19 Javascript
javascript设计模式之单体模式学习笔记
2017/02/15 Javascript
JavaScript手风琴页面制作
2017/05/17 Javascript
Angular 2父子组件数据传递之@Input和@Output详解 (上)
2017/07/05 Javascript
Node.js实现连接mysql数据库功能示例
2017/09/15 Javascript
浅谈angular表单提交中ng-submit的默认使用方法
2018/09/30 Javascript
vue-cli 2.*中导入公共less文件的方法步骤
2018/11/22 Javascript
详解Vue前端生产环境发布配置实战篇
2019/05/07 Javascript
Vue的编码技巧与规范使用详解
2019/08/28 Javascript
VUE table表格动态添加一列数据,新增的这些数据不可以编辑(v-model绑定的数据不能实时更新)
2020/04/03 Javascript
jQuery冲突问题解决方法
2021/01/19 jQuery
[03:04]DOTA2超级联赛专访ZSMJ “莫名其妙”的逆袭
2013/05/23 DOTA
[02:40]DOTA2英雄基础教程 炼金术士
2013/12/23 DOTA
Python变量作用范围实例分析
2015/07/07 Python
Python+OpenCV感兴趣区域ROI提取方法
2019/01/10 Python
django-rest-framework解析请求参数过程详解
2019/07/18 Python
使用Keras预训练好的模型进行目标类别预测详解
2020/06/27 Python
学习Python爬虫的几点建议
2020/08/05 Python
Python环境配置实现pip加速过程解析
2020/11/27 Python
详解CSS3中Media Queries的相关使用
2015/07/17 HTML / CSS
CSS3实现图片抽屉式效果的示例代码
2019/11/06 HTML / CSS
Booking.com德国:预订最好的酒店和住宿
2020/02/16 全球购物
水务局局长岗位职责
2013/11/28 职场文书
大学社团活动总结
2014/04/26 职场文书
秋天的雨教学反思
2014/04/27 职场文书
董事长秘书工作职责
2014/06/10 职场文书
家长学校教学计划
2015/01/19 职场文书
消防验收申请报告
2015/05/15 职场文书
导游词之太行山青龙峡
2020/01/14 职场文书
python中sqllite插入numpy数组到数据库的实现方法
2021/06/21 Python
启动Tomcat时出现大量乱码的解决方法
2021/06/21 Java/Android
nginx配置指令之server_name的具体使用
2022/08/14 Servers