如何在Angular表达式中应用样式？样式设置失效求助

你当前的写法问题在于：把样式字符串直接作为div的文本内容输出了，而不是绑定到元素的style属性上，浏览器只会把这段字符串当成普通文本显示，不会解析成样式规则，所以自然看不到效果。

下面给你两种可行的解决办法，按需选择：

方法一：使用动态style绑定（适合简单样式） #

利用Vue的v-bind:style（简写为:style）语法，直接把样式对象绑定到元素上：

<div class="flex-2 bold1" :style="attendance.status === 'Absent' ? { color: 'red', fontWeight: 'bold' } : {}">
  {{ attendance.status }}
</div>

这里的逻辑是：

• 当attendance.status等于'Absent'时，应用包含红色和加粗的样式对象
• 否则绑定一个空对象，不添加额外样式

注意：CSS属性名可以用驼峰式（比如fontWeight）或者带引号的短横线形式（比如'font-weight'），两种写法都能生效。

方法二：使用动态class绑定（适合复杂/可复用样式） #

这种方式更利于样式的维护和复用，先在CSS中定义一个专门的类：

.absent-highlight {
  color: red;
  font-weight: bold;
}

然后在模板中通过:class动态添加这个类：

<div class="flex-2 bold1" :class="{ 'absent-highlight': attendance.status === 'Absent' }">
  {{ attendance.status }}
</div>

当attendance.status为'Absent'时，元素会自动加上absent-highlight类，从而应用对应的样式。

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