[Vuejs]-How can i always rewind my code and run it in Javascript

by

0👍

You could use the remainder operator, and a generic array like this:

Vue.createApp({
  data() {
    return {
      textRed: "text-danger bg-white",
      counter: 0,
      classes: [
        "text-success",
        "text-warning",
        "text-info",
        "text-primary",
        "text-danger"
      ]
    };
  },
  created() {
    setInterval(() => {
      this.counter++;
    }, 1000);
  },
  computed: {
    boxClass() {
      return this.classes[this.counter % this.classes.length]
    },
  },
}).mount("#app");
<script src="https://unpkg.com/vue@3"></script>
<div id="app">{{boxClass}}</div>

Leave a comment