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的IE和Firefox兼容性汇编(zz)
Feb 02 Javascript
用javascript实现的支持lrc歌词的播放器
May 17 Javascript
网站页面自动跳转实现方法PHP、JSP(下)
Aug 01 Javascript
基于jQuery UI CSS Framework开发Widget的经验
Aug 21 Javascript
淘宝搜索框效果实现分析
Mar 05 Javascript
jquery 查找iframe父级页面元素的实现代码
Aug 28 Javascript
教你用jquery实现iframe自适应高度
Jun 11 Javascript
百度搜索框智能提示案例jsonp
Nov 28 Javascript
简单三步实现报表页面集成天气
Dec 15 Javascript
React组件的三种写法总结
Jan 12 Javascript
基于JavaScript实现带数据验证和复选框的表单提交
Aug 23 Javascript
解决layer.confirm快速点击会重复触发事件的问题
Sep 23 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
php mssql 分页SQL语句优化 持续影响
2009/04/26 PHP
PHP 获取MSN好友列表的代码(2009-05-14测试通过)
2009/09/09 PHP
thinkPHP实现瀑布流的方法
2014/11/29 PHP
无需数据库在线投票调查php代码
2016/07/20 PHP
修改Laravel5.3中的路由文件与路径
2016/08/10 PHP
php面向对象程序设计入门教程
2019/06/22 PHP
thinkPHP+mysql+ajax实现的仿百度一下即时搜索效果详解
2019/07/15 PHP
firefox和IE系列的相关区别整理 以备后用
2009/12/28 Javascript
jQuery 获取、设置HTML或TEXT内容的两种方法
2014/05/23 Javascript
javascript日期比较方法实例分析
2016/06/17 Javascript
用原生JS对AJAX做简单封装的实例代码
2016/07/13 Javascript
微信小程序 数据访问实例详解
2016/10/08 Javascript
利用jquery实现验证输入的是否是数字、小数,包含保留几位小数
2016/12/07 Javascript
js 客户端打印html 并且去掉页眉、页脚的实例
2017/11/03 Javascript
JavaScript设计模式之建造者模式实例教程
2018/07/02 Javascript
JS实现简单的抽奖转盘效果示例
2019/02/16 Javascript
vue+iview动态渲染表格详解
2019/03/19 Javascript
深入浅析vue-cli@3.0 使用及配置说明
2019/05/08 Javascript
JavaScript代码异常监控实现过程详解
2020/02/17 Javascript
利用Python的Flask框架来构建一个简单的数字商品支付解决方案
2015/03/31 Python
Pycharm技巧之代码跳转该如何回退
2017/07/16 Python
python把数组中的数字每行打印3个并保存在文档中的方法
2018/07/17 Python
Python爬取商家联系电话以及各种数据的方法
2018/11/10 Python
如何更优雅地写python代码
2019/07/02 Python
python实现xml转json文件的示例代码
2020/12/30 Python
Antonioli美国在线商店:时尚前卫奢华
2019/07/29 全球购物
初中三年学生的学习自我评价
2013/11/13 职场文书
先进个人事迹材料
2014/01/25 职场文书
妇产医师自荐信
2014/01/29 职场文书
公司司机岗位职责
2014/02/07 职场文书
聚美优品的广告词
2014/03/14 职场文书
先进个人自荐书
2015/03/06 职场文书
学生犯错保证书
2015/05/09 职场文书
写给同事的离职感言
2015/08/04 职场文书
无故旷工检讨书
2015/08/15 职场文书
HTML+CSS实现导航条下拉菜单的示例代码
2021/08/02 HTML / CSS