目录
百战程序员,全站22050+开发课程+文档 ,学习精选优质好课快人一步!观看视频 快捷键ALT+N

web前端全系列 教程

1839个小节阅读:2243.7k

收藏
全部开发者教程

鸿蒙应用开发

C语言快速入门

JAVA全系列 教程

面向对象的程序设计语言

Python全系列 教程

Python3.x版本,未来主流的版本

人工智能 教程

顺势而为,AI创新未来

大厂算法 教程

算法,程序员自我提升必经之路

C++ 教程

一门通用计算机编程语言

微服务 教程

目前业界流行的框架组合

web前端全系列 教程

通向WEB技术世界的钥匙

大数据全系列 教程

站在云端操控万千数据

AIGC全能工具班

A

A A

White Night

阅读(341)
赞(0)

样式属性绑定

图怪兽_c794e2b472444e7cdb06a02651ade396_88790

类属性绑定(class Attribute)

可以用类属性绑定从DOM元素的 class 属性中添加和删除 CSS 类。

绑定类型语法输入类型范例输入值最终输出
单一类绑定[class.sale]="onSale"boolean | undefined | nulltrue, falsetrue=>class='sale';
false=>不显示class属性
多重类绑定[class]="classExpression"string"my-class-1 my-class-2 my-class-3"class='my-class-1 my-class-2 my-class-3'
  Record<string, boolean |undefined |null>{foo: true, bar: false}class='foo'
  Array<string>['foo', 'bar']class="bar foo"

样式属性绑定(style Attribute)

可以绑定元素的style属性来动态设置样式。

绑定类型语法输入属性范例输入值最终输出
单一样式绑定[style.width]="width"string | undefined | null"100px"style="width: 100px;"
     
带单位的单一样式绑定[style.width.px]="width"number | undefined | null100style="width: 100px;"
多重样式绑定[style]="styleExpression"string"width: 100px; height: 100px"style="height: 100px; width: 100px;"
  Record<string, string |undefined |null>{width: '100px', height: '100px'}style="height: 100px; width: 100px;"

实时效果反馈

1.下列写法错误的是:

A <div [class]="['foo','bar']"></div>

B <div [class.sale]="true"></div>

C <div [style]="{width:'100px',height:'100px'}"></div>

D <div [style]="width:'100px';height:'100px'"></div>

答案

1=>D

 

北京市昌平区回龙观镇南店村综合商业楼2楼226室

©2014-2023 百战卓越(北京)科技有限公司 All Rights Reserved.

京ICP备14032124号-2