浅谈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 对Cookie 操作的封装小结
Dec 31 Javascript
jqGrid随窗口大小变化自适应大小的示例代码
Dec 28 Javascript
精通JavaScript的this关键字
May 28 Javascript
AngularJs学习第五篇从Controller控制器谈谈$scope作用域
Jun 08 Javascript
bootstrap读书笔记之CSS组件(上)
Oct 17 Javascript
微信小程序 闭包写法详细介绍
Dec 14 Javascript
使用JavaScript判断用户输入的是否为正整数(两种方法)
Feb 05 Javascript
jQuery滚动监听实现商城楼梯式导航效果
Mar 06 Javascript
使用Node.js实现一个多人游戏服务器引擎
Mar 13 Javascript
小程序实现左滑删除效果
Jul 25 Javascript
基于JavaScript 实现拖放功能
Sep 12 Javascript
js中switch语句的学习笔记
Mar 25 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
支持数组的ADDSLASHES的php函数
2010/02/16 PHP
基于curl数据采集之正则处理函数get_matches的使用
2013/04/28 PHP
PHP设计模式之迭代器模式的深入解析
2013/06/13 PHP
php中session与cookie的比较
2015/01/27 PHP
thinkPHP5框架实现基于ajax的分页功能示例
2018/06/12 PHP
asp批量修改记录的代码
2008/06/25 Javascript
javascript操作cookie的文章(设置,删除cookies)
2010/04/01 Javascript
WEB高性能开发之疯狂的HTML压缩
2010/06/19 Javascript
Javascript表达式中连续的 &amp;&amp; 和 || 之赋值区别
2010/10/17 Javascript
js操作textarea 常用方法总结
2012/12/03 Javascript
JS实现点击下载的小例子
2013/07/10 Javascript
jquery做的一个简单的屏幕锁定提示框
2014/03/26 Javascript
详解利用exif.js解决ios手机上传竖拍照片旋转90度问题
2016/11/04 Javascript
js入门之Function函数的使用方法【新手必看】
2016/11/22 Javascript
JavaScript函数参数的传递方式详解
2017/03/06 Javascript
JavaScript使用享元模式实现文件上传优化操作示例
2018/08/07 Javascript
JavaScript数据结构与算法之二叉树添加/删除节点操作示例
2019/03/01 Javascript
Vue实现背景更换颜色操作
2020/07/17 Javascript
[02:28]DOTA2亚洲邀请赛附加赛 RECAP赛事回顾
2015/01/29 DOTA
[01:48:04]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant BO3 第一场 2月7日
2021/03/11 DOTA
Python实现115网盘自动下载的方法
2014/09/30 Python
python 查找字符串是否存在实例详解
2017/01/20 Python
Python实现对象转换为xml的方法示例
2017/06/08 Python
Python队列的定义与使用方法示例
2017/06/24 Python
Python3 处理JSON的实例详解
2017/10/29 Python
python生成器用法实例详解
2019/11/22 Python
Python3监控windows,linux系统的CPU、硬盘、内存使用率和各个端口的开启情况详细代码实例
2020/03/18 Python
Android Q之气泡弹窗的实现示例
2020/06/23 Python
美国在线鲜花速递:ProFlowers
2017/01/05 全球购物
料理师求职信
2014/01/30 职场文书
小区门卫岗位职责范本
2014/08/24 职场文书
普通党员自我剖析材料
2014/10/07 职场文书
博物馆观后感
2015/06/05 职场文书
2015年学校教科室工作总结
2015/07/20 职场文书
Python实现socket库网络通信套接字
2021/06/04 Python
详解Golang如何优雅的终止一个服务
2022/03/21 Golang