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事件冒泡传递(cancelBubble 、stopPropagation)
May 08 Javascript
JavaScript与Div对层定位和移动获得坐标的实现代码
Sep 08 Javascript
JS显示下拉列表框内全部元素的方法
Mar 31 Javascript
原生js实现移动开发轮播图、相册滑动特效
Apr 17 Javascript
Js实现无刷新删除内容
Apr 29 Javascript
jQuery实现返回顶部功能
Feb 23 Javascript
Bootstrap表单Form全面解析
Jun 13 Javascript
node.js版本管理工具n无效的原理和解决方法
Nov 24 Javascript
AngularJS日程表案例详解
Aug 15 Javascript
策略模式实现 Vue 动态表单验证的方法
Sep 16 Javascript
在Vue.js中使用TypeScript的方法
Mar 19 Javascript
element-ui tree结构实现增删改自定义功能代码
Aug 31 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
PHP6 先修班 JSON实例代码
2008/08/23 PHP
php数据结构 算法(PHP描述) 简单选择排序 simple selection sort
2011/08/09 PHP
解析使用ThinkPHP应该掌握的调试手段
2013/06/20 PHP
浅谈PHP链表数据结构(单链表)
2016/06/08 PHP
node.js应用后台守护进程管理器Forever安装和使用实例
2014/06/01 Javascript
JS实现的用来对比两个用指定分隔符分割的字符串是否相同
2014/09/19 Javascript
ECMAScript6函数默认参数
2015/06/12 Javascript
js+HTML5基于过滤器从摄像头中捕获视频的方法
2015/06/16 Javascript
jQuery实现鼠标滑过链接控制图片的滑动展开与隐藏效果
2015/10/28 Javascript
jQuery实现打开页面渐现效果示例
2016/07/27 Javascript
AngularJS下对数组的对比分析
2016/08/24 Javascript
自学实现angularjs依赖注入
2016/12/20 Javascript
jquery中用函数来设置css样式
2016/12/22 Javascript
NodeJS仿WebApi路由示例
2017/02/28 NodeJs
Vue集成Iframe页面的方法示例
2017/12/12 Javascript
vue-cli3.0+element-ui上传组件el-upload的使用
2018/12/03 Javascript
IE浏览器下JS脚本提交表单后,不能自动提示问题解决方法
2019/06/04 Javascript
javascript导出csv文件(excel)的方法示例
2019/08/25 Javascript
js实现GIF图片的分解和合成
2019/10/24 Javascript
JavaScript canvas绘制折线图
2020/02/18 Javascript
Vue点击切换Class变化,实现Active当前样式操作
2020/07/17 Javascript
原生JS实现多条件筛选
2020/08/19 Javascript
详解vite2.0配置学习(typescript版本)
2021/02/25 Javascript
网站渗透常用Python小脚本查询同ip网站
2017/05/08 Python
django rest framework 实现用户登录认证详解
2019/07/29 Python
Python xml、字典、json、类四种数据类型如何实现互相转换
2020/05/27 Python
利用pipenv和pyenv管理多个相互独立的Python虚拟开发环境
2020/11/01 Python
Python实例教程之检索输出月份日历表
2020/12/16 Python
selenium携带cookies模拟登陆CSDN的实现
2021/01/19 Python
台湾百利市购物中心:e-Payless
2017/08/16 全球购物
医学院学生的自我评价分享
2013/11/19 职场文书
老人节标语大全
2014/10/08 职场文书
庆祝儿童节标语
2014/10/09 职场文书
干部作风建设年活动剖析材料
2014/10/23 职场文书
无房证明样本
2015/06/17 职场文书
导游词之海南天涯海角
2019/12/05 职场文书