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 相关文章推荐
JQuery.uploadify 上传文件插件的使用详解 for ASP.NET
Jan 22 Javascript
读jQuery之一(对象的组成)
Jun 11 Javascript
Bootstrap时间选择器datetimepicker和daterangepicker使用实例解析
Sep 17 Javascript
纯JS实现弹性导航条效果
Mar 06 Javascript
javascript内存分配原理实例分析
Apr 10 Javascript
vuejs2.0子组件改变父组件的数据实例
May 10 Javascript
JavaScript 保护变量不被随意修改的实现代码
Sep 27 Javascript
JS简单实现点击跳转登陆邮箱功能的方法
Oct 31 Javascript
浅析JS抽象工厂模式
Dec 14 Javascript
webpack项目轻松混用css module的方法
Jun 12 Javascript
在layui中layer弹出层点击事件无效的解决方法
Sep 05 Javascript
Angular单元测试之事件触发的实现
Jan 20 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
phpMyAdmin 链接表的附加功能尚未激活问题的解决方法(已测)
2012/03/27 PHP
php正则去除网页中所有的html,js,css,注释的实现方法
2016/11/03 PHP
thinkphp查询,3.X 5.0方法(亲试可行)
2017/06/17 PHP
Docker搭建自己的PHP开发环境
2018/02/24 PHP
javascript 嵌套的函数(作用域链)
2010/03/15 Javascript
jQuery ajax cache缓存问题
2010/07/01 Javascript
jquery设置控件位置的方法
2013/08/21 Javascript
可兼容IE的获取及设置cookie的jquery.cookie函数方法
2013/09/02 Javascript
JS实现匀速运动的代码实例
2013/11/29 Javascript
jquery.post用法关于type设置问题补充
2014/01/03 Javascript
jQuery实现的图片分组切换焦点图插件
2015/01/06 Javascript
jQuery实现360°全景拖动展示
2015/03/18 Javascript
javaScript知识点总结(必看篇)
2016/06/10 Javascript
jQuery实现边框动态效果的实例代码
2016/09/23 Javascript
BootStrap CSS全局样式和表格样式源码解析
2017/01/20 Javascript
jQuery Validate格式验证功能实例代码(包括重名验证)
2017/07/18 jQuery
Vue单页面应用保证F5强刷不清空数据的解决方案
2018/01/31 Javascript
小程序tab页无法传递参数的方法
2018/08/03 Javascript
ES6 fetch函数与后台交互实现
2018/11/14 Javascript
原生JS无缝滑动轮播图
2019/10/22 Javascript
vue使用better-scroll实现滑动以及左右联动
2020/06/30 Javascript
在Django框架中编写Context处理器的方法
2015/07/20 Python
python装饰器练习题及答案
2019/11/01 Python
使用python-opencv读取视频,计算视频总帧数及FPS的实现
2019/12/10 Python
Python使用正则表达式实现爬虫数据抽取
2020/08/17 Python
python线程优先级队列知识点总结
2021/02/28 Python
css3媒体查询中device-width和width的区别详解
2020/03/27 HTML / CSS
泰国演唱会订票网站:StubHub泰国
2018/02/26 全球购物
俄罗斯运动鞋商店:Sneakerhead
2018/05/10 全球购物
英国索普公园票务和酒店套餐:Thorpe Breaks
2019/09/14 全球购物
Internet体系结构
2014/12/21 面试题
生物科学专业职业规划书范文
2014/02/11 职场文书
大学应届毕业生求职信
2014/05/24 职场文书
拓展训练激励口号
2014/06/17 职场文书
2014办公室副主任四风对照检查材料思想汇报
2014/09/20 职场文书
领导参观欢迎词
2015/01/26 职场文书