复杂的写法:
<div :class="[$style.gallery, galleryReady? '' : $style.galleryLoading]">
简写:
<div :class="[$style.gallery, {[$style.galleryLoading]: !galleryReady}]">
总结一下结合 css modules 写 v-bind:class 时的原则:
- 单个 class
:class="$style.className1" - 多个 class 用数组
:class="[$style.className1, $style.className2]" - 多个 class 用数组 + 条件判断的 class, 用
[{}]嵌套的形式, 注意 {} 中 key 的写法
:class="[$style.className1, $style.className2, {[$style.className3]: condition}]" - 特别复杂的逻辑 - 使用 computed 等编程式写法
参考链接: https://vuejs.org/v2/guide/class-and-style.html#Array-Syntax
网友评论