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

复杂的写法:

<div :class="[$style.gallery, galleryReady? '' : $style.galleryLoading]">

简写:

<div :class="[$style.gallery, {[$style.galleryLoading]: !galleryReady}]">

总结一下结合 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