javascript - Vue js，检测值何时更改以突出显示其文本

Question

我有一个简单的脚本，每隔几分钟生成随机数，每次 rand 不等于我想要更改其背景颜色之前的随机数。可能的？所以随机数生成 1,1,3，当它达到 3 时我想突出显示背景。谢谢

https://jsfiddle.net/keseyxgm/1/

new Vue({
  el: '#app',
  data: {
    rand: 0
  },
  mounted : function(){
   var me = this;
    setInterval(function(){
        me.rand = Math.floor(Math.random() * 4) + 1 ;
      me.$forceUpdate();
    },1000)
  }
})


<div id="app">
  <p>{{rand}}</p>
</div>

Answer 1

创建一个数据属性来存储更新后的值是否与当前值不同，并将background-color绑定(bind)到该属性:

new Vue({
  el: '#app',
  data() {
    return { 
      rand: 0,
      diff: false
    }
  },
  mounted() {
    setInterval(() => {
      let rand = Math.floor(Math.random() * 4) + 1 ;
      this.diff = rand !== this.rand;
      this.rand = rand;
    }, 1000);
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script>
<div id="app">
  <p :style="{ 'background-color': (diff) ? 'gold' : 'initial' }">{{rand}}</p>
</div>