浅谈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 array(数组)使用字符串作为数组下标的方法
Nov 19 Javascript
js打造数组转json函数
Jan 14 Javascript
JavaScript判断按钮被点击的方法
Dec 13 Javascript
jQuery javascript获得网页的高度与宽度的实现代码
Apr 26 Javascript
JS 动态加载js文件和css文件 同步/异步的两种简单方式
Sep 23 Javascript
学习JavaScript图片预加载模块
Nov 07 Javascript
Node.js测试中的Mock文件系统详解
Nov 21 Javascript
jquery实现input框获取焦点的简单实例
Jan 26 Javascript
微信小程序之发送短信倒计时功能
Aug 30 Javascript
JavaScript简单实现合并两个Json对象的方法示例
Oct 16 Javascript
js正则相关知识点专题
May 10 Javascript
vue.js 输入框输入值自动过滤特殊字符替换中问标点操作
Aug 31 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 download.php实现代码 跳转到下载文件(response.redirect)
2009/08/26 PHP
PDO版本问题 Invalid parameter number: no parameters were bound
2013/01/06 PHP
在laravel-admin中列表中禁止某行编辑、删除的方法
2019/10/03 PHP
ExtJs3.0中Store添加 baseParams 的Bug
2010/03/10 Javascript
javascript window.confirm确认 取消对话框实现代码小结
2012/10/21 Javascript
javascript闭包的高级使用方法实例
2013/07/04 Javascript
优化Jquery,提升网页加载速度
2013/11/14 Javascript
如何在JavaScript中实现私有属性的写类方式(一)
2013/12/04 Javascript
jQuery创建自定义的选择器用以选择高度大于100的超链接实例
2015/03/18 Javascript
JS实现的幻灯片切换显示效果
2016/09/07 Javascript
JS公共小方法之判断对象是否为domElement的实例
2016/11/25 Javascript
如何清除IE10+ input X 文本框的叉叉和密码输入框的眼睛图标
2016/12/21 Javascript
解决vue页面DOM操作不生效的问题
2018/03/17 Javascript
jQuery阻止事件冒泡实例分析
2018/07/03 jQuery
使用rollup打包JS的方法步骤
2018/12/05 Javascript
vue 里面的 $forceUpdate() 强制实例重新渲染操作
2020/09/21 Javascript
在windows下快速搭建web.py开发框架方法
2016/04/22 Python
python字典的常用操作方法小结
2016/05/16 Python
安装Python和pygame及相应的环境变量配置(图文教程)
2017/06/04 Python
python2.7和NLTK安装详细教程
2018/09/19 Python
python 中的列表生成式、生成器表达式、模块导入
2019/06/19 Python
Python 实现OpenCV格式和PIL.Image格式互转
2020/01/09 Python
40个你可能不知道的Python技巧附代码
2020/01/29 Python
Python基于traceback模块获取异常信息
2020/07/23 Python
英国办公用品商店:Office Outlet
2018/04/04 全球购物
函授大学生自我鉴定
2014/02/05 职场文书
《火烧云》教学反思
2014/04/12 职场文书
运动会宣传口号
2014/06/09 职场文书
教师暑期培训感言
2014/08/15 职场文书
领导干部“四风”查摆问题个人整改措施
2014/10/28 职场文书
2014年优秀党员材料
2014/12/18 职场文书
自我检讨书怎么写
2015/05/07 职场文书
新员工实习期个人工作总结
2015/10/15 职场文书
少年的你:世界上没有如果,要在第一次就勇敢的反抗
2019/11/20 职场文书
Prometheus 监控MySQL使用grafana展示
2021/08/30 MySQL
在 HTML 页面中使用 React的场景分析
2022/01/18 Javascript