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 相关文章推荐
二级域名转向类
Nov 09 Javascript
在页面上用action传递参数到后台出现乱码的解决方法
Dec 31 Javascript
BOOTSTRAP时间控件显示在模态框下面的bug修复
Feb 05 Javascript
jQuery学习之DOM节点的插入方法总结
Jan 22 Javascript
网页中右键功能的实现方法之contextMenu的使用
Feb 20 Javascript
Vue2.0 axios前后端登陆拦截器(实例讲解)
Oct 27 Javascript
基于vue-cli创建的项目的目录结构及说明介绍
Nov 23 Javascript
vue2中使用sass并配置全局的sass样式变量的方法
Sep 04 Javascript
VUE引入第三方js包及调用方法讲解
Mar 01 Javascript
微信小程序实现圆形进度条动画
Nov 18 Javascript
解决Vue中的生命周期beforeDestory不触发的问题
Jul 21 Javascript
javascript实现扫雷简易版
Aug 18 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中register_globals参数为OFF和ON的区别(register_globals 使用详解)
2012/02/05 PHP
php 生成唯一id的几种解决方法
2013/03/08 PHP
php实现自动获取生成文章主题关键词功能的深入分析
2013/06/03 PHP
thinkphp模板输出技巧汇总
2014/11/24 PHP
ZendFramework框架实现连接两个或多个数据库的方法
2016/12/08 PHP
PHP设计模式之外观模式(Facade)入门与应用详解
2019/12/13 PHP
php设计模式之原型模式分析【星际争霸游戏案例】
2020/03/23 PHP
javascript学习(二)javascript常见问题总结
2013/01/02 Javascript
分享Javascript中最常用的55个经典小技巧
2013/11/29 Javascript
Jquery响应回车键直接提交表单操作代码
2014/07/25 Javascript
node.js中的fs.realpathSync方法使用说明
2014/12/16 Javascript
jQuery中first()方法用法实例
2015/01/06 Javascript
js检测判断日期大于多少天的方法
2015/05/04 Javascript
Juery解决tablesorter中文排序和字符范围的方法
2015/05/06 Javascript
AngularJS 入门教程之事件处理器详解
2016/08/19 Javascript
EasyUI修改DateBox和DateTimeBox的默认日期格式示例
2017/01/18 Javascript
简单实现js菜单栏切换效果
2017/03/04 Javascript
python正则匹配查询港澳通行证办理进度示例分享
2013/12/27 Python
json跨域调用python的方法详解
2017/01/11 Python
Python实现的随机森林算法与简单总结
2018/01/30 Python
详解python实现线程安全的单例模式
2018/03/05 Python
对python中的控制条件、循环和跳出详解
2019/06/24 Python
Python使用matplotlib实现交换式图形显示功能示例
2019/09/06 Python
Python爬虫之urllib基础用法教程
2019/10/12 Python
基于python实现语音录入识别代码实例
2020/01/17 Python
keras模型可视化,层可视化及kernel可视化实例
2020/01/24 Python
Python内置异常类型全面汇总
2020/05/28 Python
美国鲍勃商店:Bob’s Stores
2018/07/22 全球购物
印尼综合在线预订网站:Tiket.com(机票、酒店、火车、租车和娱乐)
2018/10/11 全球购物
彪马荷兰官网:PUMA荷兰
2019/05/08 全球购物
vue+django实现下载文件的示例
2021/03/24 Vue.js
洗煤厂厂长岗位职责
2014/01/03 职场文书
教你打造完美的创业计划书
2014/01/06 职场文书
浅谈Mysql多表连接查询的执行细节
2021/04/24 MySQL
Python OpenCV超详细讲解调整大小与图像操作的实现
2022/04/02 Python
nginx之内存池的实现
2022/06/28 Servers