未应用计算 属性 的 VueJS 样式

Question

<template>
  <div v-bind:class="divClass">
    <v-card>
       <h3>Test</h3>
    </v-card>
  </div>
</template>

我使用计算 属性 来应用 class:

  computed: {
    divClass() {
      return this.$store.state.lineData.data.length > 0
        ? ".customcol .triggered"
        : ".customcol";
    },
  }

classes 的样式在这里：

<style scoped>
.customcol {
  width: 100% !important;
  transition: width 0.3s ease;
}
.customcol .triggered {
  width: 75% !important;
}
</style>

我可以看到控制台中应用了 classes，但是 element.style { } 只是空的，而 div 的宽度不是 100%。我做错了什么？

Answer 1

我认为应该是：

? "customcol triggered"
: "customcol";

没有前缀点。

这些点用于表示选择器中的 class，它们不是 class 名称本身的一部分。

你也会遇到这个选择器的问题：

.customcol .triggered {
  width: 75% !important;
}

这匹配 .triggered 作为 .customcol 的后代，而您在同一元素上有两个 class。您需要从选择器 .customcol.triggered.

中删除 space