详解Angular2学习笔记之Html属性绑定


Posted in Javascript onJanuary 03, 2018

简介

基本HTML属性

<td [attr.colspan]="tableColspan"></td>

Css 类绑定

<!-- 第一种情况 class 类全部替换 -->
<div [class]="divClass">CSS 类绑定,[class] 全部替换的例子</div>
 
<!-- 第二种情况 替换 class 类的部分属性 --> 
<div [class.a]="isSpcial">CSS 类绑定,[class.sepcial] 部分替换的例子</div>
 
<!-- 第三种情况 根据表达式显示部分 class 属性-->
<div [ngClass]="{a:isA, b:isB}">CSS 类绑定,[ngClass] 替换多个的例子</div>

Style 属性绑定

<!-- 替换部分的 Style -->
 <button [style.color]="isSpecial ? 'red' : 'green'" ]>Red</button>
 
 <!-- 替换所有的样式 -->
 <button [ngStyle]="{'font-style':this.canSave? 'italic' : 'normal'}" ]>Red</button>

HTML属性绑定

<td [attr.colspan]=”tableColspan”>Something</td>

tableColspan 是一个表达式,当界面在渲染的时候会将 tableColspan的值绑定到 attr后面的 colspan 上面去

修改 bind.component.html

<!-- 增加代码 -->
<div>
 <div>[attr.colspan] 例子:</div>
 <table border="1px">
 <tr>
  <td [attr.colspan]="colspanSize">跨列的例子</td>
 </tr>
 <tr>
  <td>单元格1</td>
  <td>单元格1</td>
 </tr>
 </table>

图示:

详解Angular2学习笔记之Html属性绑定

Css 类绑定

第一种情况

[calss]
someExpression 的值会完全替换掉 class的值。

修改 bind.component.css

.a{background-color: #A7A9AE;}

.b{color: #488aff;}

.c{font-size: 1rem;}

修改bind.component.html

<!-- 增加代码 -->
<div>
 <div>CSS 类绑定例子1:[class]</div>
 <div [class]="divClass">CSS 类绑定,[class] 全部替换的例子</div>
</div>

修改 bind.component.ts

divClass: string;

constructor() {
 //在3秒钟之后将样式设置为 " a b c "
 setInterval(()=>{
 this.divClass = "a b c";
 }, 3000)
}

图示:

详解Angular2学习笔记之Html属性绑定

第二种情况

[calss.special]
isSpecial 是一个 boolean,当 isSpecial 为 true 的时候会出现 special 的值,为 false的时候不会出现。

修改bind.component.html

<!-- 增加代码 -->
<div [class.a]="isSpcial">CSS 类绑定,[class.sepcial] 部分替换的例子</div>

修改 bind.component.ts

divClass: string;
isSpcial: boolean = false;

constructor() {

 setInterval(()=>{
 this.divClass = "a b c";
 
 //在 3秒钟之后显示样式
 this.isSpcial = true;
 }, 3000)
}

图示:

详解Angular2学习笔记之Html属性绑定

第三种情况

[ngClass]="{aaa:isA, bbb: isB}"
aaa 是指标签上面class 的属性值,isA 就boolean, 只有当 isA 为 true 的时候才会显示 aaa 属性。 同理,bbb 也是一样。

修改bind.component.html

<!-- 增加代码 -->
<div [ngClass]="{a:isA, b:isB}">CSS 类绑定,[ngClass] 替换多个的例子</div>

修改 bind.component.ts

divClass: string;
isSpcial: boolean = false;
isA: boolean = false;
isB: boolean = false;
constructor() {
 setInterval(()=>{
 this.divClass = "a b c";
 this.isSpcial = true;
 this.isA = true
 this.isB = true
 }, 3000)
}

图示:

详解Angular2学习笔记之Html属性绑定

Style 属性绑定

第一种情况

[style.color] = "isSpecial ? 'red' : 'green' "
控制 style样式的 color, 如果 isSpecial 的值为true,那么color的属性为 red。

第二种情况

[ngStyle]= "{'font-style' : this.canSave ? 'italic' : 'normal' }"
控制样式 font-style 如果 this.canSave 的值为 trur 那么样式就是 italic, 否则就是 normal

写在最后

1.对于Style的属性绑定和 class 的属性绑定是一样一样的。
2.对于文章中所用的代码是结合了 Angular2学习笔记之数据绑定上面的例子做的,链接地址:https://3water.com/article/132066.htm

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

Javascript 相关文章推荐
jquery 简单图片导航插件jquery.imgNav.js
Mar 17 Javascript
jQuery中add实现同时选择两个id对象
Oct 22 Javascript
Javascript中For In语句用法实例
May 14 Javascript
详解JavaScript的while循环的使用
Jun 03 Javascript
jquery实现删除一个元素后面的所有元素功能
Dec 21 Javascript
阿里巴巴技术文章分享 Javascript继承机制的实现
Jan 14 Javascript
Bootstrap如何创建表单
Oct 21 Javascript
如何开发出更好的JavaScript模块
Dec 22 Javascript
layui中table表头样式修改方法
Aug 15 Javascript
vueJs实现DOM加载完之后自动下拉到底部的实例代码
Aug 31 Javascript
Vue 中 template 有且只能一个 root的原因解析(源码分析)
Apr 11 Javascript
jQuery实现动态向上滚动
Dec 21 jQuery
Angular2学习笔记之数据绑定的示例代码
Jan 03 #Javascript
vue、react等单页面项目应该这样子部署到服务器
Jan 03 #Javascript
AngularJS实现的2048小游戏功能【附源码下载】
Jan 03 #Javascript
浅谈node模块与npm包管理工具
Jan 03 #Javascript
JavaScript基于面向对象实现的猜拳游戏
Jan 03 #Javascript
JS实现的简单拖拽购物车功能示例【附源码下载】
Jan 03 #Javascript
基于js 各种排序方法和sort方法的区别(详解)
Jan 03 #Javascript
You might like
ThinkPHP结合ajax、Mysql实现的客户端通信功能代码示例
2014/06/23 PHP
Netbeans 8.2与PHP相关的新特性介绍
2016/10/08 PHP
php获取数据库中数据的实现方法
2017/06/01 PHP
PHP中Session ID的实现原理实例分析
2019/08/17 PHP
PHP之header函数详解
2021/03/02 PHP
javascript 数据类型转换(parseInt,parseFloat)
2010/07/20 Javascript
js动态为代码着色显示行号
2013/05/29 Javascript
jquery的flexigrid无法显示数据提示获取到数据
2013/07/19 Javascript
javascript实现阻止iOS APP中的链接打开Safari浏览器
2014/06/12 Javascript
如何解决IONIC页面底部被遮住无法向上滚动问题
2016/09/06 Javascript
在javaScript中检测数据类型的几种方式小结
2017/03/04 Javascript
Vue源码学习之初始化模块init.js解析
2017/11/02 Javascript
基于 Vue 实现一个酷炫的 menu插件
2017/11/14 Javascript
vue 每次渲染完页面后div的滚动条保持在最底部的方法
2018/03/17 Javascript
JS引用传递与值传递的区别与用法分析
2018/06/01 Javascript
vue cli3适配所有端方案的实现
2020/04/13 Javascript
[02:20]DOTA2亚洲邀请赛 EHOME战队出场宣传片
2015/02/07 DOTA
[01:12:53]完美世界DOTA2联赛PWL S2 Forest vs SZ 第一场 11.25
2020/11/26 DOTA
Python利用pyHook实现监听用户鼠标与键盘事件
2014/08/21 Python
详解python中 os._exit() 和 sys.exit(), exit(0)和exit(1) 的用法和区别
2017/06/23 Python
使用 Python 实现简单的 switch/case 语句的方法
2018/09/17 Python
pyinstaller打包单个exe后无法执行错误的解决方法
2019/06/21 Python
使用Python自动生成HTML的方法示例
2019/08/06 Python
Python对接 xray 和微信实现自动告警
2019/09/17 Python
基于Django统计博客文章阅读量
2019/10/29 Python
python实现上传文件到linux指定目录的方法
2020/01/03 Python
ansible-playbook实现自动部署KVM及安装python3的详细教程
2020/05/11 Python
医学院护理专业应届生求职信
2013/11/12 职场文书
酒店保洁主管岗位职责
2013/11/28 职场文书
天鹅的故事教学反思
2014/02/04 职场文书
党的群众路线教育实践活动个人剖析材料
2014/10/07 职场文书
2014年度个人工作总结范文
2015/03/09 职场文书
大学生逃课检讨书
2015/05/04 职场文书
烈士陵园观后感
2015/06/08 职场文书
2015年清剿火患专项行动工作总结
2015/07/27 职场文书
Python绘制分类图的方法
2021/04/20 Python