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之ESC(第二类混淆)
May 06 Javascript
jquery 屏蔽一个区域内的所有元素,禁止输入
Oct 22 Javascript
JavaScript类和继承 prototype属性
Sep 03 Javascript
javascript面向对象之定义成员方法实例分析
Jan 13 Javascript
js操作table元素实现表格行列新增、删除技巧总结
Nov 18 Javascript
Angularjs material 实现搜索框功能
Mar 08 Javascript
深入分析javascript中的错误处理机制
Jul 17 Javascript
Vue实现带进度条的文件拖动上传功能
Feb 23 Javascript
layui点击按钮添加可编辑的一行方法
Aug 15 Javascript
Vuejs 实现简易 todoList 功能 与 组件实例代码
Sep 10 Javascript
vue+vant使用图片预览功能ImagePreview的问题解决
Apr 10 Javascript
react使用antd表单赋值,用于修改弹框的操作
Oct 29 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
JAVA/JSP学习系列之六
2006/10/09 PHP
PHP OPCode缓存 APC详细介绍
2010/10/12 PHP
PHP常用开发函数解析之数组篇[未完结]
2012/07/30 PHP
php获取网页标题和内容函数(不包含html标签)
2014/02/03 PHP
php解压文件代码实现php在线解压
2014/02/13 PHP
PHP5.3以上版本安装ZendOptimizer扩展
2015/03/27 PHP
Smarty高级应用之缓存操作技巧分析
2016/05/14 PHP
PHP实现在windows下配置sendmail并通过mail()函数发送邮件的方法
2017/06/20 PHP
jQuery 页面 Mask实现代码
2010/01/09 Javascript
javascript forEach通用循环遍历方法
2010/10/11 Javascript
JS实现超炫网页烟花动画效果的方法
2015/03/02 Javascript
Javascript中实现String.startsWith和endsWith方法
2015/06/10 Javascript
纯JavaScript实现的分页插件实例
2015/07/14 Javascript
原生JS实现跑马灯效果
2017/02/20 Javascript
详解vue-cli中模拟数据的两种方法
2018/07/03 Javascript
学前端,css与javascript重难点浅析
2020/06/11 Javascript
Vue前端判断数据对象是否为空的实例
2020/09/02 Javascript
python链接Oracle数据库的方法
2015/06/28 Python
举例讲解Django中数据模型访问外键值的方法
2015/07/21 Python
解决Django模板无法使用perms变量问题的方法
2017/09/10 Python
Django 浅谈根据配置生成SQL语句的问题
2018/05/29 Python
Django中数据库的数据关系:一对一,一对多,多对多
2018/10/21 Python
python使用Turtle库绘制动态钟表
2018/11/19 Python
Django Rest framework解析器和渲染器详解
2019/07/25 Python
Django继承自带user表并重写的例子
2019/11/18 Python
django框架F&amp;Q 聚合与分组操作示例
2019/12/12 Python
python3 实现口罩抽签的功能
2020/03/11 Python
Pytorch转keras的有效方法,以FlowNet为例讲解
2020/05/26 Python
HTML5 直播疯狂点赞动画实现代码 附源码
2020/04/14 HTML / CSS
BRASTY捷克:购买香水、化妆品、手袋和手表
2017/07/12 全球购物
软件测试工程师面试问题精选
2016/10/28 面试题
文秘档案管理岗位职责
2014/03/06 职场文书
世界气象日活动总结
2015/02/27 职场文书
2015年学校党支部工作总结
2015/04/01 职场文书
小学体育教学随笔
2015/08/14 职场文书
关于社会实践的心得体会(2016最新版)
2016/01/25 职场文书