浅谈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下高性能字符串连接StringBuffer类
Aug 16 Javascript
用Javascript评估用户输入密码的强度(Knockout版)
Nov 30 Javascript
Bootstrap滚动监听(Scrollspy)插件详解
Apr 26 Javascript
jQuery过滤特殊字符及JS字符串转为数字
May 26 Javascript
js实现添加删除表格(两种方法)
Apr 27 Javascript
十个免费的web前端开发工具详细整理
Sep 18 Javascript
详解ES6 Fetch API HTTP请求实用指南
Nov 14 Javascript
微信小程序嵌入腾讯视频源过程详解
Aug 08 Javascript
微信小程序移动拖拽视图-movable-view实例详解
Aug 17 Javascript
layui使用form表单实现post请求页面跳转的方法
Sep 14 Javascript
js正则匹配markdown里的图片标签的实现
Mar 24 Javascript
JS代码编译器Monaco使用方法
Jun 11 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编写的SVN类
2013/07/18 PHP
apache php mysql开发环境安装教程
2016/07/28 PHP
PHP获取用户客户端真实IP的解决方案
2016/10/10 PHP
php 使用html5实现多文件上传实例
2016/10/24 PHP
PHP获取HTTP body内容的方法
2018/12/31 PHP
Jquery常用技巧收集整理篇
2010/11/14 Javascript
jQuery取得select选择的文本与值的示例
2013/12/09 Javascript
jquery实现pager控件示例
2014/04/09 Javascript
js处理表格对table进行修饰
2014/05/26 Javascript
jQuery将多条数据插入模态框的示例代码
2014/09/25 Javascript
jQuery实现定位滚动条位置
2016/08/05 Javascript
简单理解js的prototype属性及使用
2016/12/07 Javascript
jQuery基于ajax实现页面加载后检查用户登录状态的方法
2017/02/10 Javascript
javascript深拷贝和浅拷贝详解
2017/02/14 Javascript
javascript 中事件冒泡和事件捕获机制的详解
2017/09/01 Javascript
基于React+Redux的SSR实现方法
2018/07/03 Javascript
Koa代理Http请求的示例代码
2018/10/10 Javascript
JavaScript常见鼠标事件与用法分析
2019/01/03 Javascript
JS实现点击按钮随机生成可拖动的不同颜色块示例
2019/01/30 Javascript
layer弹出层自定义提交取消按钮的例子
2019/09/10 Javascript
javascript设计模式 ? 访问者模式原理与用法实例分析
2020/04/26 Javascript
在Debian下配置Python+Django+Nginx+uWSGI+MySQL的教程
2015/04/25 Python
解决Python出现_warn_unsafe_extraction问题的方法
2016/03/24 Python
微信 用脚本查看是否被微信好友删除
2016/10/28 Python
Python实现批量读取图片并存入mongodb数据库的方法示例
2018/04/02 Python
Python 实现域名解析为ip的方法
2019/02/14 Python
Python 获取 datax 执行结果保存到数据库的方法
2019/07/11 Python
用python生成与调用cntk模型代码演示方法
2019/08/26 Python
使用OpenCV circle函数图像上画圆的示例代码
2019/12/27 Python
Python列表操作方法详解
2020/02/09 Python
用python对oracle进行简单性能测试
2020/12/05 Python
Django与AJAX实现网页动态数据显示的示例代码
2021/02/24 Python
美国职棒大联盟官方网上商店:MLBShop.com
2017/11/12 全球购物
2015年学生会纪检部工作总结
2015/03/31 职场文书
2016学雷锋优秀志愿者事迹材料
2016/02/25 职场文书
MySQL 使用索引扫描进行排序
2021/06/20 MySQL