对象语法

我们可以传给 :class 一个或多个对象
:class 指令也可以与普通的 class 共存

  1. <div
  2.   class="static"
  3.   :class="{ active: isActive, 'text-danger': hasError }"
  4. ></div>
  6. <script>
  7. data() {
  8.   return {
  9.     isActive: true,
  10.     hasError: false
  11.   }
  12. }
  13. </script>

数组语法

  1. <div :class="[activeClass, errorClass]"></div>
  3. <script>
  4.   data() {
  5.     return {
  6.       activeClass: 'active',
  7.       errorClass: 'text-danger'
  8.     }
  9.   }
  10. </script>

三元表达式

  1. <div :class="[isActive ? activeClass : '', errorClass]"></div>

数组语法中使用对象语法

  1. <div :class="[{ active: isActive }, errorClass]"></div>