详解Angular2学习笔记之Html属性绑定


Posted in Javascript onJanuary 03, 2018

简介

基本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>

图示:

详解Angular2学习笔记之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)
}

图示:

详解Angular2学习笔记之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)
}

图示:

详解Angular2学习笔记之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)
}

图示:

详解Angular2学习笔记之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/132066.htm

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
css把超出的部分显示为省略号的方法兼容火狐
Jul 23 Javascript
JavaScript之自定义类型
May 04 Javascript
jquery设置元素的readonly和disabled的写法
Sep 22 Javascript
JavaScript对HTML DOM使用EventListener进行操作
Oct 21 Javascript
学习javascript面向对象 理解javascript对象
Jan 04 Javascript
微信小程序技巧之show内容展示,上传文件编码问题
Jan 23 Javascript
微信小程序 image组件binderror使用例子与js中的onerror区别
Feb 15 Javascript
解决jquery appaend元素中id绑定事件失效的问题
Sep 12 jQuery
vue-router配合ElementUI实现导航的实例
Feb 11 Javascript
Vue.js单向绑定和双向绑定实例分析
Aug 14 Javascript
详解angular2如何手动点击特定元素上的点击事件
Oct 16 Javascript
vue路由--网站导航功能详解
Mar 29 Javascript
Angular2学习笔记之数据绑定的示例代码
Jan 03 #Javascript
vue、react等单页面项目应该这样子部署到服务器
Jan 03 #Javascript
AngularJS实现的2048小游戏功能【附源码下载】
Jan 03 #Javascript
浅谈node模块与npm包管理工具
Jan 03 #Javascript
JavaScript基于面向对象实现的猜拳游戏
Jan 03 #Javascript
JS实现的简单拖拽购物车功能示例【附源码下载】
Jan 03 #Javascript
基于js 各种排序方法和sort方法的区别(详解)
Jan 03 #Javascript
You might like
php 遍历数据表数据并列表横向排列的代码
2009/09/05 PHP
php date()日期时间函数详解
2010/05/16 PHP
php中定时计划任务的实现原理
2013/01/08 PHP
关于PHP5.6+版本“No input file specified”问题的解决
2019/12/11 PHP
NodeJS url验证(url-valid)的使用方法
2013/11/18 NodeJs
Bootstrap每天必学之进度条
2015/11/30 Javascript
浅谈js控制li标签排序问题 js调用php函数的方法
2016/10/16 Javascript
js 实现一些跨浏览器的事件方法详解及实例
2016/10/27 Javascript
JS实现简单的天数计算器完整实例
2017/04/28 Javascript
详解Nodejs 通过 fs.createWriteStream 保存文件
2017/10/10 NodeJs
vue如何进行动画的封装
2018/09/26 Javascript
js+canvas实现简单扫雷小游戏
2021/01/22 Javascript
react的hooks的用法详解
2020/10/12 Javascript
vue从后台渲染文章列表以及根据id跳转文章详情详解
2020/12/14 Vue.js
node脚手架搭建服务器实现token验证的方法
2021/01/20 Javascript
Python常用库推荐
2016/12/04 Python
Python利用BeautifulSoup解析Html的方法示例
2017/07/30 Python
pandas修改DataFrame列名的方法
2018/04/08 Python
Python3用tkinter和PIL实现看图工具
2018/06/21 Python
基于python的Paxos算法实现
2019/07/03 Python
vscode 配置 python3开发环境的方法
2019/09/19 Python
TensorFlow tensor的拼接实例
2020/01/19 Python
selenium学习教程之定位以及切换frame(iframe)
2021/01/04 Python
css3弹性盒模型实例介绍
2013/05/27 HTML / CSS
HTML5 用动画的表现形式装载图像
2016/03/08 HTML / CSS
法国珠宝店:CLEOR
2017/01/29 全球购物
优瑞自动咖啡机官网:Jura
2018/09/29 全球购物
美国婴儿用品及配件购买网站:Munchkin
2019/04/03 全球购物
一份比较全的PHP面试题
2016/07/29 面试题
数据库的约束含义
2012/09/09 面试题
Linux常见面试题
2016/10/04 面试题
如何通过 CSS 写出火焰效果
2021/03/24 HTML / CSS
2014年五一促销活动方案
2014/03/09 职场文书
物流专业求职信
2014/06/30 职场文书
党员批评与自我批评发言
2014/10/02 职场文书
大学生受助感言
2015/08/01 职场文书