本篇文章给大家介绍一下angular中class和style绑定。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。
angular10中class和style的绑定1.class绑定绑定类型语法输入类型输入值范例
单个类绑定 [class.foo]=‘flag’ boolean|undefined|null true,false
多个类绑定 [class]=‘classexpr’ string
{[key:string]:boolean | undefined | null}
array < string> ‘my-class1 my-class2’
{foo: true, bar: false}
[‘foo’,‘bar’]
相关推荐：《angular教程》
1.1 单属性绑定1、基本语法
<p [class.p-box]='flag'>    <button (click)='changeflag()'>修改flag的值</button></p>
2、当表达式的值为真的时候，angular就会加上这个类，为假的时候就会移除
flag = truechangeflag():void {    this.flag = !this.flag}
3、当flag为真的时候
4、当flag为假的时候
1.2 多个属性绑定-字符串的形式1、字符串的形式
<p [class]='classexpr'>绑定字符串的class</p>
classexpr:string = 'class-expr1 class-expr2 class-expr3'
2、绑定结果
1.3 多个属性绑定-对象的形式1、对象的形式
<p [class]='classexpr'>绑定对象形式的class</p>
classexpr:object = {    'foo': true,    'bar': false}
2、绑定结果
1.4 多个属性绑定-数组的形式1、数组的形式
<p [class]='classexpr'>绑定数组形式的class</p>
classexpr:array<string> = ['foo','bar']
2、绑定结果
2. style绑定绑定类型语法输入类型输入值范例
单一样式绑定 [style.width]=“width” string undefined null “100px”
带单位的单一样式绑定 [style.width.px]=“width” number undefined null 100
多个样式绑定 [style]=“styleexpr” string
{[key: string]: string undefined null} “width: 100px; height: 100px”
{width: ‘100px’, height: ‘100px’}
2.1 单个属性1、单个属性的形式
<p [style.width]='styleexpr'>绑定单个形式的style</p>
styleexpr:string = '100px'
2、绑定结果
2.2 带有单位的单个属性1、带有单位
<p [style.width.px]='100'>绑定单个形式的style</p>
2、绑定结果
2.3 多个属性的绑定<p [style]='styleexpr'>绑定多个形式的style</p>
1、字符串
styleexpr:string = 'width: 100px;height: 200px'
2、对象
styleexpr:object = {    width: '100px',    height: '200px'}
3、结果图
更多编程相关知识，请访问：编程视频！！
以上就是浅谈angular10中class和style绑定的详细内容。