时间戳

首页 > 解决方案 > 未应用具有计算属性的 VueJS 样式

javascript - 未应用具有计算属性的 VueJS 样式

问题描述

<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%。我究竟做错了什么？

标签： javascriptcssvue.jscomputed-properties

解决方案

我认为应该是：

? "customcol triggered"
: "customcol";

没有前缀点。

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

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

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

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

推荐阅读