本文共 733 字，大约阅读时间需要 2 分钟。

一、 ng-class

ng-class 指令用于给 HTML 元素动态绑定一个或多个 CSS 类。

ng-class 指令的值可以是字符串，对象，或一个数组。

• 如果是字符串，多个类名使用空格分隔。
• 如果是对象，需要使用 key-value 对，key 为你想要添加的类名，value 是一个布尔值。只有在 value 为 true 时类才会被添加。
• 如果是数组，可以由字符串或对象组合组成，数组的元素可以是字符串或对象。

1.1 示列

   
选择一个类:
天空色番茄色
   
  
    
Welcome Home!
  
    
I like it!
   

1.2 其他写法

// isCurrentPage是一个函数，当执行结果为true时设置class为classng-class="{   className1: isCurrentPage(client), className2: classIsTrue(str)}// 当值(key1、key2为true时设置指定的class1，class2)ng-class="{   class1: key1, class2: key2}// 选定指定的classng-class="{'key1':'class1', 'key2':'class2'}['key2']"// 指定多个classng-class="['className1','className2']"// 三元表达式ng-class="obj ? 'class1': 'class2'"

二、ng-style

ng-style 指令为 HTML 元素添加 style 属性。

ng-style 属性值必须是对象，表达式返回的也是对象。

   
显示效果