Using Vue.js to detect changes in a value and dynamically highlight the text

Question

Using Vue.js to detect changes in a value and dynamically highlight the text

I am working on a simple script that generates random numbers every few moments. I want to change the background color whenever the random number is not equal to the one before it. Is this possible? For example, if the random numbers generated are 1, 1, and then 3, I would like to highlight the background when it reaches 3. Thank you for your help!

Link to code

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>

javascript vue.js

Answer 1

Answer №1

Create a data property to hold the information about whether the updated value is different from the current one and link the background-color with it:

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

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

Answer 2

Create a data property to hold the information about whether the updated value is different from the current one and link the background-color with it:

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

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

Answer 3

Answer №2

One effective method is to utilize a watcher along with a class binding. Check out this example on jsfiddle: https://jsfiddle.net/omarjebari/wjf8qbt0/18/

<div id="app">
   <div class="random-element" v-bind:class="{ active: isChanged }">{{ rand }}</div>
</div>
<script>

    new Vue({
        el: "#app",
        data: {
            rand: 0,
            isChanged: false,
        },
        mounted : function(){
            setInterval(() => {
                this.rand = Math.floor(Math.random() * 4) + 1;
            }, 1000);
        },
        watch: {
            rand(newVal, oldVal) {
                console.log(`${newVal} vs ${oldVal}`);
                if (newVal !== oldVal) {
                    this.isChanged = true;
                    setTimeout(() => {
                        this.isChanged = false;
                    }, 300);
                }
            }
        },
    })
</script>
<style>
    div.random-element {
        height: 30px;
        color: black;
        padding: 5px;
    }

    div.active {
        background-color: red;
    }
</style>

Answer 4

One effective method is to utilize a watcher along with a class binding. Check out this example on jsfiddle: https://jsfiddle.net/omarjebari/wjf8qbt0/18/

<div id="app">
   <div class="random-element" v-bind:class="{ active: isChanged }">{{ rand }}</div>
</div>
<script>

    new Vue({
        el: "#app",
        data: {
            rand: 0,
            isChanged: false,
        },
        mounted : function(){
            setInterval(() => {
                this.rand = Math.floor(Math.random() * 4) + 1;
            }, 1000);
        },
        watch: {
            rand(newVal, oldVal) {
                console.log(`${newVal} vs ${oldVal}`);
                if (newVal !== oldVal) {
                    this.isChanged = true;
                    setTimeout(() => {
                        this.isChanged = false;
                    }, 300);
                }
            }
        },
    })
</script>
<style>
    div.random-element {
        height: 30px;
        color: black;
        padding: 5px;
    }

    div.active {
        background-color: red;
    }
</style>

Using Vue.js to detect changes in a value and dynamically highlight the text

Answer №1

Answer №2

Similar questions

Strategies for setting up the runtime dynamically for Nextjs API routes

Creating custom mesh Morph Target Animations using THREE.js

Interactive Chart with Angular for Multiple Selections

State calculation occurs too tardily

Utilizing getServerSideProps in the new app router (app/blah/page.tsx) for maximum functionality

What is the best way to trigger a function when a chart changes in Nuxt using Vue JS?

Struggling to Parse JSON Responses?

Efficiently Displaying Multiple HTML Elements in React Native WebView

Enabling and disabling multiple input fields based on the status of a checkbox in order to manage dynamic inputs

An error occurred while trying to add a property to an array because the object is not extensible: TypeError -

Remove item from jQuery's "raw text" HTML

Is real-time updating possible with data binding in Polymer and JavaScript?

Exploring the methods of accessing $scope within an AngularJS directive

Return to the main page by clicking on the link #id

Utilizing jQuery to access Flash functions

The resend email feature isn't functioning properly on the production environment with next js, however, it works seamlessly in the development environment

Contrasting the use of jQuery versus AJAX for updating static page text

What is the method to utilize global mixin methods within a TypeScript Vue component?

The optimal and most secure location for storing and retrieving user access credentials

mentioning a JSON key that includes a period