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

作用区域是拍卖。假设当前价格为10 系统时时显示另外买家出价的时候更新提示某某买家出价 并且总价 10 发生瞬时的变化

<template>
    <div class="text-green-600">

        {{ amount }}
    </div>
</template>

<script setup>
// 当 amount 发生变化时,颜色变红色然后变会绿色
cosnt amount = ref(10)

</script>
Mujin
Mumujin
讨论数量: 7

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

1年前 评论
<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>

这样应该是可以滴

1年前 评论
Mumujin (楼主) 1年前
1874 (作者) 1年前

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

1年前 评论
Mumujin (楼主) 1年前
cnguu

简单结合css动画

Vue.js

<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>
1年前 评论

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!