Vue计算属性中设置的条件CSS类在浏览器未生效问题

1. 动态class引用错误 #

你在模板中把headerHeightClass写成了带引号的字符串字面量，导致Vue没有将其识别为computed属性，而是当作普通类名处理，自然无法触发动态样式切换。

修正模板 #

将:class数组中的'headerHeightClass'改为不带引号的变量名：

<template>
  <header :class="['w-full', 'text-sm', headerHeightClass]">
    <div class="fixed top-0 left-0 w-full h-16 bg-white">
            <!--无关HTML代码-->
    </div>
  </header>
</template>

2. 视觉无变化的隐藏问题 #

内部的div使用了fixed定位并固定了h-16类，该元素脱离文档流后，header的高度变化不会影响它，导致你即使修正了class引用，视觉上也看不到高度变化。

优化方案 #

将动态高度类直接应用到这个fixed的div上：

<template>
  <header :class="['w-full', 'text-sm']">
    <div :class="['fixed top-0 left-0 w-full bg-white', headerHeightClass]">
            <!--无关HTML代码-->
    </div>
  </header>
</template>

两种computed写法的有效性 #

你的两种computed写法都是正确的，修正模板引用后均可正常生效：

写法一（对象语法） #

computed: {
  headerHeightClass() {
    return {
      "h-16": !this.isLoggedIn,
      "h-32": this.isLoggedIn,
    };
  },
},

写法二（字符串语法） #

computed: {
  headerHeightClass() {
    return this.isLoggedIn ? "h-32" : "h-16";
  },
},

内容的提问来源于stack exchange，提问作者user20305261