VUE 绑定值发生变化时如何瞬时变更数值颜色

watch监听数据，然后自己写一个css动画

<template>
    <div :class="currentColor">
        {{ amount }}
    </div>
</template>

<script setup>
// 当 amount 发生变化时，颜色变红色然后变会绿色
const amount = ref(10);
// 当前颜色
const currentColor = ref("green"); 
// 监听amout值变化
watch(() => amount.value, () => {
    // 变为红色
    currenColor.value = "red"; 
    // 0.5后变为绿色
    settimeout(() => {
        currentColor.value = "green";
    }, 1000);
});
</script>

这样应该是可以滴

使用 深度监听 watch 或者 计算属性 computed 对 amount 的值做监听, 在数据更改后为外层 div 设置新的 css 样式, 随后用 setTimeout 在指定的时间后重新更改为初始的样式

简单结合css动画

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

const amount = ref(0);

const redToGreen = ref('');

onMounted(() => {
  // 循环演示
  setInterval(() => {
    // 先移除动画
    redToGreen.value = '';

    // 模拟ajax请求
    const timer = setTimeout(() => {
      redToGreen.value = 'text-redToGreen';
      amount.value = Math.random() * 100 | 0;
      clearTimeout(timer);
    }, 0);
  }, 4000);
});
</script>

<template>
  <div class="content">
    <span :class="redToGreen">{{ amount }}</span>
  </div>
</template>

<style scoped>
  .content {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #000;
    width: 160px;
    height: 160px;
    font-size: 64px;
    font-weight: bold;
    color: green;
  }

  .text-redToGreen {
    animation: redToGreen 1s;
  }

  @keyframes redToGreen {
    0% {
      color: red;
    }
    100% {
      color: green;
    }
  }
</style>