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入门教程 Cookies
Jan 31 Javascript
让你的博客飘雪花超出屏幕依然看得见
Jan 04 Javascript
基于JavaScript 数据类型之Boolean类型分析介绍
Apr 19 Javascript
jQuery使用一个按钮控制图片的伸缩实现思路
Apr 19 Javascript
js中substring和substr的定义和用法
May 05 Javascript
一个字符串反转函数可实现字符串倒序
Sep 15 Javascript
JavaScript 模块化编程(笔记)
Apr 08 Javascript
使用JQuery实现的分页插件分享
Nov 05 Javascript
解决浏览器会自动填充密码的问题
Apr 28 Javascript
vue基于v-charts封装双向条形图的实现代码
Dec 09 Javascript
Vue如何实现验证码输入交互
Dec 07 Vue.js
React forwardRef的使用方法及注意点
Jun 13 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
解析左右值无限分类的实现算法
2013/06/20 PHP
php实现图片转换成ASCII码的方法
2015/04/03 PHP
浅析php如何实现App常用的秒发功能
2016/08/03 PHP
PHP设计模式(九)外观模式Facade实例详解【结构型】
2020/05/02 PHP
js+css实现上下翻页相册代码分享
2015/08/18 Javascript
uploadify多文件上传参数设置技巧
2015/11/16 Javascript
微信jssdk在iframe页面失效问题的解决措施
2016/03/03 Javascript
Angularjs实现分页和分页算法的示例代码
2016/12/23 Javascript
vue.js 1.x与2.0中js实时监听input值的变化
2017/03/15 Javascript
webpack项目调试以及独立打包配置文件的方法
2018/02/28 Javascript
微信小程序模拟cookie的实现
2018/06/20 Javascript
javascript显示动态时间的方法汇总
2018/07/06 Javascript
React router动态加载组件之适配器模式的应用详解
2018/09/12 Javascript
vue+axios实现文件下载及vue中使用axios的实例
2018/09/21 Javascript
JS监听滚动和id自动定位滚动
2018/12/18 Javascript
vuejs简单验证码功能完整示例
2019/01/08 Javascript
nodejs读取图片返回给浏览器显示
2019/07/25 NodeJs
vue路由守卫,限制前端页面访问权限的例子
2019/11/11 Javascript
详解微信小程序动画Animation执行过程
2020/09/23 Javascript
Python网络编程 Python套接字编程
2017/09/13 Python
在Python文件中指定Python解释器的方法
2019/02/18 Python
django框架防止XSS注入的方法分析
2019/06/21 Python
Flask框架请求钩子与request请求对象用法实例分析
2019/11/07 Python
Python大数据之网络爬虫的post请求、get请求区别实例分析
2019/11/16 Python
Python requests模块基础使用方法实例及高级应用(自动登陆,抓取网页源码)实例详解
2020/02/14 Python
Python文件操作及内置函数flush原理解析
2020/10/13 Python
为什么在使用动态 SQL 语句时必须为低层数据库对象授予权限
2012/12/13 面试题
北京捷通华声语音技术有限公司Java软件工程师笔试题
2012/04/10 面试题
优秀大学生的自我评价
2014/01/16 职场文书
普通简短的个人自我评价
2014/02/15 职场文书
代领报检证委托书范本
2014/10/11 职场文书
先进个人评语大全
2015/01/04 职场文书
餐饮服务食品安全承诺书
2015/04/29 职场文书
暖春观后感
2015/06/08 职场文书
无违反计划生育证明格式
2015/06/24 职场文书
Nginx缓存设置案例详解
2021/09/15 Servers