专栏首页一只想做全栈的猫【Angular6+】属性及样式绑定

【Angular6+】属性及样式绑定

Angular6_属性及样式绑定

Angular 通过 [] 来绑定数值、变量或者表达式,这种绑定是单向数据绑定

属性绑定

属性绑定分为两种

  • Property 元素的常规属性,比如 src、disabled 等 <img [src]="heroImageUrl" /> <button [disabled]="isUnchanged">Cancel is disabled</button> <div [ngClass]="classes">[ngClass] binding to the classes property</div> <app-hero-detail [hero]="currentHero"></app-hero-detail>
  • Attribute 元素的非常规属性,比如 colspan 等 <tr> <td [attr.colspan]="1 + 1">One-Two</td> </tr>

CSS 类绑定

借助 CSS 类绑定,可以从元素的 class attribute 上添加和移除 CSS 类名。

<!-- 这是一个或者全有或者全无的替换型绑定。
即当 badCurly 有值时 class 这个 attribute 设置的内容会被完全覆盖 -->
<div class="bad curly special" [class]="badCurly">Bad curly</div>
<!-- toggle the "special" class on/off with a property -->
<div [class.special]="isSpecial">The class binding is special</div>

样式绑定

样式绑定的语法与属性绑定类似。 但方括号中的部分不是元素的属性名,而由 style 前缀,一个点 (.)和 CSS 样式的属性名组成。 形如:[style.style-property]

<button [style.color]="isSpecial ? 'red': 'green'">Red</button>
<button [style.background-color]="canSave ? 'cyan': 'grey'">Save</button>
<button [style.font-size.em]="isSpecial ? 3 : 1">Big</button>
<button [style.font-size.%]="!isSpecial ? 150 : 50">Small</button>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 【Angular6+】事件绑定

    添加如下 onSelect() 方法,它会把模板中被点击的英雄赋值给组件的 selectedHero 属性。

    CloudCat
  • 【前端芝士树】IE 静态页兼容指南

    使用 font-awesome 的动画时(loading 效果),倘若用 display 控制显隐,则在 IE 下会表现异常。 图标会瞬间显示出来,但是却没有动...

    CloudCat
  • 【Angular】Angula6中的组件通信

    CloudCat
  • 自定义view实现超萌动感小炸弹

    Hello,小伙伴们,我回来了。这些日子有的小伙伴问我怎么没有更新了。这个其实是有原因,首先,最近有点忙。其次没有看到什么觉得好玩的动画!最后,就是我更新过了!...

    用户2802329
  • 最有可能被人工智能所替代的十大专业

    随着科技进步, 人工智能发展势头那叫一个迅猛 先有李世石被阿尔法狗惨虐, 后有“无人驾驶”汽车的问世 还有众多未来将被人工智能所替代的东西, 包括你的专业! 你...

    企鹅号小编
  • 你的工作未来会被机器人取代吗?

    Case1:我站在一座大型超市里,排着队等着收银。前面两个顾客为谁是先来的吵起来了,已经在互骂脏话。收银员站在那里,呆若木鸡。终于巡场经理看到了这边的争吵,过来...

    叶锦鲤
  • Python小技巧:写出更易维护的代码

    命名的元祖,写出来的代码相比第一种写法可读性更好,当属性变多时,我们甚至很难按照index方式访问元素。

    double
  • MIT线形机器人灵活穿行脑血管,还能轻松急转弯:华人教授团队出品,登上Science子刊

    从前,医生直接动手插入导管,碰到急转弯就很难操作,进度缓慢;而磁驱动的机器人,头部可以快速转向,更顺利地到达目的地。

    量子位
  • 前端学习笔记之CSS文档流

    An element is called out of flow if it is floated, absolutely positioned, or is...

    Jetpropelledsnake21
  • 用机器学习打造聊天机器人(二) 概念篇

    程序员一一涤生

扫码关注云+社区

领取腾讯云代金券