Angular4学习教程之HTML属性绑定的方法


Posted in Javascript onJanuary 04, 2018

前言

本文主要给大家介绍了关于Angular4 HTML属性绑定的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧。

简介

基本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>

图示:

Angular4学习教程之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)
}

图示:

Angular4学习教程之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)
}

图示:

Angular4学习教程之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)
}

图示:

Angular4学习教程之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/132122.htm

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
javascript GUID生成器实现代码
Oct 31 Javascript
有关jquery与DOM节点操作方法和属性记录
Apr 15 Javascript
AngularJs Scope详解及示例代码
Sep 01 Javascript
Centos7 中安装 Node.js v4.4.4
Nov 03 Javascript
React组件的三种写法总结
Jan 12 Javascript
jquery.validate表单验证插件使用详解
Jun 21 jQuery
React Native中TabBarIOS的简单使用方法示例
Oct 13 Javascript
详解vue几种主动刷新的方法总结
Feb 19 Javascript
读懂CommonJS的模块加载
Apr 19 Javascript
Vue页面手动刷新,实现导航栏激活项还原到初始状态
Aug 06 Javascript
js利用拖放实现添加删除
Aug 27 Javascript
Vue为什么要谨慎使用$attrs与$listeners
Aug 27 Javascript
JS基于for语句编写的九九乘法表示例
Jan 04 #Javascript
JS计算输出100元钱买100只鸡问题的解决方法
Jan 04 #Javascript
Angular4学习教程之DOM属性绑定详解
Jan 04 #Javascript
JS实现简易换图时钟功能分析
Jan 04 #Javascript
Angular4学习之Angular CLI的安装与使用教程
Jan 04 #Javascript
利用Vue2.x开发实现JSON树的方法
Jan 04 #Javascript
vue-cli配置文件——config篇
Jan 04 #Javascript
You might like
【动漫杂谈】关于《请在T台上微笑》
2020/03/03 日漫
ftp类(myftp.php)
2006/10/09 PHP
PHP实现获取域名的方法小结
2014/11/05 PHP
php中使用sftp教程
2015/03/30 PHP
在Debian系统下配置LNMP的教程
2015/07/09 PHP
qTip 基于JQuery的Tooltip插件[兼容性好]
2010/09/01 Javascript
网站404页面3秒后跳到首页的实例代码
2013/08/16 Javascript
禁止空格提交表单的js代码
2013/11/17 Javascript
容易造成JavaScript内存泄露几个方面
2014/09/04 Javascript
JavaScript基于ajax编辑信息用法实例
2015/07/15 Javascript
JavaScript事件 &quot;事件对象&quot;的注意要点
2016/01/14 Javascript
微信小程序 小程序制作及动画(animation样式)详解
2017/01/06 Javascript
详解Node.js利用node-git-server快速搭建git服务器
2017/09/27 Javascript
vue动画打包后失效问题的解决方法
2018/09/18 Javascript
微信小程序如何使用globalData的方法
2019/06/06 Javascript
用Golang运行JavaScript的实现示例
2019/11/25 Javascript
使用js实现单链解决前端队列问题的方法
2020/02/03 Javascript
如何使用JavaScript实现无缝滚动自动播放轮播图效果
2020/08/20 Javascript
[03:36]2015国际邀请赛第二日现场精彩集锦
2015/08/06 DOTA
Python中函数eval和ast.literal_eval的区别详解
2017/08/10 Python
浅谈python 线程池threadpool之实现
2017/11/17 Python
使用python爬取B站千万级数据
2018/06/08 Python
Python3.5多进程原理与用法实例分析
2019/04/05 Python
Python读写文件模式和文件对象方法实例详解
2019/09/17 Python
django 读取图片到页面实例
2020/03/27 Python
Python约瑟夫生者死者小游戏实例讲解
2021/01/04 Python
电子商务专业求职信
2014/03/08 职场文书
青年志愿者先进事迹
2014/05/06 职场文书
企业承诺书格式
2014/05/21 职场文书
基层党建工作汇报材料
2014/08/15 职场文书
办公室领导干部作风整顿个人整改措施
2014/09/17 职场文书
培训通知
2015/04/17 职场文书
通知的写法
2015/04/23 职场文书
Nginx 负载均衡是什么以及该如何配置
2021/03/31 Servers
Spring Boot优化后启动速度快到飞起技巧示例
2022/07/23 Java/Android
JS前端canvas交互实现拖拽旋转及缩放示例
2022/08/05 Javascript