v-bind:class & css modules & 条件判断

复杂的写法:

简写:

总结一下结合 css modules 写 v-bind:class 时的原则:

  1. 单个 class
    :class="$style.className1"
  2. 多个 class 用数组
    :class="[$style.className1, $style.className2]"
  3. 多个 class 用数组 + 条件判断的 class, 用 [{}] 嵌套的形式, 注意 {} 中 key 的写法
    :class="[$style.className1, $style.className2, {[$style.className3]: condition}]"
  4. 特别复杂的逻辑 - 使用 computed 等编程式写法

参考链接: https://vuejs.org/v2/guide/class-and-style.html#Array-Syntax

你可能感兴趣的:(v-bind:class & css modules & 条件判断)