How to remove a class from list items one by one in Vue?

Question

Vue.js

Hello. Please help with the code )
There is a list with a class that sets the list tag opacity: 0

<ul class="header_navmenu">
  <li class="nav_menu-item" v-bind:class="{opacity_deactivated:isActive}"><a href="" target="_blank">1</a></li>
  <li class="nav_menu-item" v-bind:class="{opacity_deactivated:isActive}"><a href="">2</a></li>
  <li class="nav_menu-item" v-bind:class="{opacity_deactivated:isActive}"><a href="">3</a></li>
  <li class="nav_menu-item" v-bind:class="{opacity_deactivated:isActive}"><a href="">4</a></li>
  <li class="nav_menu-item" v-bind:class="{opacity_deactivated:isActive}"><a href="">4</a></li>
  <li class="nav_menu-item" v-bind:class="{opacity_deactivated:isActive}"><a href="">5</a></li>
</ul>

How to use Vue.js at intervals of 2 seconds, in turn, automatically given a class with true, translate to false
Here is the Vue code

var app = new Vue({
  el: '#header',
  data:{
    isActive: true
  }
})

Answer 1

It is not clear what motivates the non-use of v-for. If used, it will be much easier to achieve what you want, for example :

.hidden {
  opacity: 0;
}

data: () => ({
  items: [
    { text: '...', hidden: true },
    { text: '...', hidden: true },
    ...
  ],
}),
mounted() {
  this.items.forEach((n, i) => {
    setTimeout(() => n.hidden = false, 300 * (i + 1));
  });
},

<li v-for="{ text, hidden } in items" :class="{ hidden }">
  <a href="">{{ text }}</a>
</li>