语法

{静态 class} [动态 class]
:class="{'static-class'}"
:class="{'static-class1', 'static-class2': varible}"
:class="[dynamicClass1, dynamicClass2]"
:class="[dynamicClass1, dynamicClass2, {'static-class1', 'static-class2': varible}]"

常量

:class="{color-white}"

这里应该是黑底白字

:class="[{color-white}]"

这里应该是黑底白字

:class="{color-white: true}"

这里应该是黑底白字

:class="[{color-white: true}]"

这里应该是黑底白字

变量

:class="[blueOrRed]"

灰底{{blueOrRed == 'red' ? '红字' : '蓝字'}}


:class="[{font-large}, blueOrRed]"

大字体,灰底{{blueOrRed == 'red' ? '红字' : '蓝字'}}


:class="[{font-large, font-italic: true}, blueOrRed]"

斜体,大字体,灰底{{blueOrRed == 'red' ? '红字' : '蓝字'}}


:class="[{font-large, font-italic: true, align-right: alignRight}, blueOrRed]"

{{alignRight ? '右' : '左'}}对齐,斜体,大字体, 灰底{{blueOrRed == 'red' ? '红字' : '蓝字'}}

:class="[{font-large, font-italic: true, align-right: alignRight}, blueOrRed, 'h']"

{{alignRight ? '右' : '左'}}对齐,斜体,大字体, 灰底{{blueOrRed == 'red' ? '红字' : '蓝字'}},红边框