不应用具有计算属性的 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 {

  width: 75% !important;

}

这匹配.triggered为 的后代.customcol，而您在同一元素上有两个类。您需要从选择器中删除空格.customcol.triggered.