如何在Vue中使用三元运算符修改文本颜色？样式显示异常求助

你当前的问题是把样式字符串直接赋值给了element.isResolve，UI渲染时只会将其作为普通文本展示，不会解析为CSS样式。以下是两种可行的解决方式：

方式一：存储状态标识，模板中动态绑定样式 #

先修改JS逻辑，把isResolve改成布尔状态，而不是样式字符串：

mainTrack() {
 this.axios
    .get(
      `${configObject.apiBaseUrl}/Maintenance/Company`,
      configObject.authConfig()
    )
    .then((res) => {
     this.maintainTrack= res.data;

     this.maintainTrack.forEach(element => {
       // 转换为布尔值，存储状态而非样式
       element.isResolve = element.isResolve === 'true';
     });
    })
    .catch((error) => {});
},

然后在模板中使用动态样式绑定（以Vue为例）：

<!-- 假设你用v-for渲染列表项 -->
<div v-for="item in maintainTrack" :key="item.id" :style="{ backgroundColor: item.isResolve ? 'green' : 'red' }">
  <!-- 这里放置你的列表内容 -->
</div>

方式二：直接存储样式对象，模板绑定对象 #

如果希望在JS中直接处理样式，可以将样式以对象形式存储：

mainTrack() {
 this.axios
    .get(
      `${configObject.apiBaseUrl}/Maintenance/Company`,
      configObject.authConfig()
    )
    .then((res) => {
     this.maintainTrack= res.data;

     this.maintainTrack.forEach(element => {
       // 存储样式对象，而非字符串
       element.itemStyle = element.isResolve === 'true' ? { backgroundColor: 'green' } : { backgroundColor: 'red' };
     });
    })
    .catch((error) => {});
},

模板中直接绑定这个样式对象：

<div v-for="item in maintainTrack" :key="item.id" :style="item.itemStyle">
  <!-- 列表内容 -->
</div>

简单来说，UI框架不会自动把字符串格式的样式解析生效，必须通过动态样式绑定语法，传入符合要求的样式对象或计算值才能正确应用样式。

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