如何实现基于数值的文本颜色自动变换？数值为0时更改文本颜色

下面针对不同技术场景给出具体实现方案，直接套用就能解决需求：

原生 JavaScript + CSS 方案 #

适合纯静态页面，核心通过类名切换控制样式，逻辑简单直接。

步骤1：定义样式类 #

/* 默认文本颜色 */
.text-normal {
  color: #333;
}
/* 数值为0时的文本颜色 */
.text-zero {
  color: #ff4444;
}

步骤2：HTML结构 #

<p id="dynamicText" class="text-normal">需要变色的目标文本</p>
<button id="changeValueBtn">切换数值</button>

步骤3：编写逻辑代码 #

// 模拟业务中的指定数值
let targetNum = 0;

// 封装颜色更新函数
function updateTextColor(num) {
  const textEl = document.getElementById('dynamicText');
  if (num === 0) {
    textEl.classList.add('text-zero');
    textEl.classList.remove('text-normal');
  } else {
    textEl.classList.add('text-normal');
    textEl.classList.remove('text-zero');
  }
}

// 初始化执行一次
updateTextColor(targetNum);

// 示例：数值变化时触发更新（实际场景可能是接口返回、表单输入等）
document.getElementById('changeValueBtn').addEventListener('click', () => {
  targetNum = targetNum === 0 ? 15 : 0;
  updateTextColor(targetNum);
});

Vue 3 方案（Composition API） #

利用Vue响应式特性，自动监听数值变化更新样式，无需手动操作DOM。

<template>
  <p :class="{ 'text-zero': targetNum === 0, 'text-normal': targetNum !== 0 }">
    需要变色的目标文本
  </p>
  <button @click="switchNum">切换数值</button>
</template>

<script setup>
import { ref } from 'vue';

// 响应式数值
const targetNum = ref(0);

// 切换数值示例
function switchNum() {
  targetNum.value = targetNum.value === 0 ? 20 : 0;
}
</script>

<style scoped>
.text-normal {
  color: #333;
}
.text-zero {
  color: #ff4444;
}
</style>

React 方案 #

通过状态管理实现条件渲染样式，符合React组件化开发习惯。

import { useState } from 'react';

function DynamicColorText() {
  // 状态维护指定数值
  const [targetNum, setTargetNum] = useState(0);

  // 切换数值示例
  const switchNum = () => {
    setTargetNum(prev => prev === 0 ? 25 : 0);
  };

  return (
    <div>
      {/* 直接通过条件判断设置内联样式 */}
      <p style={{ color: targetNum === 0 ? '#ff4444' : '#333' }}>
        需要变色的目标文本
      </p>
      <button onClick={switchNum}>切换数值</button>
    </div>
  );
}

export default DynamicColorText;

额外提示 #

• 如果数值是异步获取（比如接口返回），只需要在数值更新后调用对应更新逻辑即可；
• 可扩展逻辑：比如数值小于0、大于0分别设置不同颜色，只需修改判断条件和样式类。

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