详解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 相关文章推荐
jquery事件机制扩展插件 jquery鼠标右键事件。
Dec 26 Javascript
使用javascript实现ListBox左右全选,单选,多选,全请
Nov 07 Javascript
利用进制转换压缩数字函数分享
Jan 02 Javascript
JavaScript实现在数组中查找不同顺序排列的字符串
Sep 26 Javascript
谷歌浏览器调试JavaScript小技巧
Dec 29 Javascript
Javascript基础教程之数据类型 (数值 Number)
Jan 18 Javascript
jQuery解析XML与传统JavaScript方法的差别实例分析
Mar 05 Javascript
jquery马赛克拼接翻转效果代码分享
Aug 24 Javascript
详解JavaScript的变量和数据类型
Nov 27 Javascript
利用jquery正则表达式在页面验证url网址输入是否正确
Apr 04 jQuery
js 将canvas生成图片保存,或直接保存一张图片的实现方法
Jan 02 Javascript
一篇超完整的Vue新手入门指导教程
Nov 18 Vue.js
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垃圾代码优化操作代码
2010/08/05 PHP
基于simple_html_dom的使用小结
2013/07/01 PHP
php轻松实现中英文混排字符串截取
2014/05/28 PHP
Codeigniter上传图片出现“You did not select a file to upload”错误解决办法
2014/06/12 PHP
php通过smtp邮件验证登陆的方法
2016/05/11 PHP
图文详解PHP环境搭建教程
2016/07/16 PHP
PHP实现向关联数组指定的Key之前插入元素的方法
2017/06/06 PHP
通过源码解析Laravel的依赖注入
2018/01/22 PHP
Jquery Ajax学习实例 向页面发出请求,返回XML格式数据
2010/03/14 Javascript
JavaScript入门之对象与JSON详解
2011/10/21 Javascript
js AppendChild与insertBefore用法详细对比
2013/12/16 Javascript
javascript实现淡蓝色的鼠标拖动选择框实例
2015/05/09 Javascript
用window.onerror捕获并上报Js错误的方法
2016/01/27 Javascript
JQuery异步加载PartialView的方法
2016/06/07 Javascript
js中的触发事件对象event.srcElement与event.target详解
2017/03/15 Javascript
微信小程序 图片绝对定位(背景图片)
2017/04/05 Javascript
nodejs连接mysql数据库简单封装示例-mysql模块
2017/04/10 NodeJs
巧用weui.topTips验证数据的实例
2017/04/17 Javascript
深入理解angular2启动项目步骤
2017/07/15 Javascript
使用 vue-i18n 切换中英文效果
2018/05/23 Javascript
Python 基础知识之字符串处理
2017/01/06 Python
Python学生成绩管理系统简洁版
2020/04/05 Python
python3下使用cv2.imwrite存储带有中文路径图片的方法
2018/05/10 Python
Python+OpenCV图片局部区域像素值处理详解
2019/01/23 Python
使用python实现抓取腾讯视频所有电影的爬虫
2019/04/15 Python
Python使用pymysql模块操作mysql增删改查实例分析
2019/12/19 Python
python爬虫泛滥的解决方法详解
2020/11/25 Python
捷克多品牌在线时尚商店:ANSWEAR.cz
2020/10/03 全球购物
大学毕业生工作的自我评价
2013/10/01 职场文书
校园文化标语
2014/06/18 职场文书
村主任“四风”问题个人整改措施
2014/10/04 职场文书
政风行风自查自纠报告
2014/10/21 职场文书
怎样写离婚协议书
2015/01/26 职场文书
遗嘱范文
2015/08/07 职场文书
公文写作指导之倡议书!
2019/07/03 职场文书
Ajax是什么?Ajax高级用法之Axios技术
2021/04/21 Javascript