不应用具有计算属性的 VueJS 样式

Question

<template>

  <div v-bind:class="divClass">

    <v-card>

       <h3>Test</h3>

    </v-card>

  </div>

</template>

我使用计算属性来应用类：

  computed: {

    divClass() {

      return this.$store.state.lineData.data.length > 0

        ? ".customcol .triggered"

        : ".customcol";

    },

  }

这些类的样式在这里：

<style scoped>

.customcol {

  width: 100% !important;

  transition: width 0.3s ease;

}

.customcol .triggered {

  width: 75% !important;

}

</style>

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

Answer 1

我认为应该是：? "customcol triggered": "customcol";没有前缀点。点用于表示选择器中的类，它们不是类名本身的一部分。您还会遇到此选择器的问题：.customcol .triggered {&nbsp; width: 75% !important;}这匹配.triggered为 的后代.customcol，而您在同一元素上有两个类。您需要从选择器中删除空格.customcol.triggered.