@blockso

Как в Vue сделать поочередное удаление класса у элементов списка?

Всем привет. Помогите, пожалуйста, с кодом )
Есть список с классом который устанавливает тегу спиcка 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>

Как с помощью Vue.js с интервалом в 2 секунды по очереди автоматически данный класс с true, перевести в false
Вот код Vue
var app = new Vue({
	el: '#header',
	data:{
		isActive: true
	}
})
  • Вопрос задан
  • 280 просмотров
Решения вопроса 1
0xD34F
@0xD34F Куратор тега Vue.js
Непонятно, чем мотивировано неиспользование v-for. Если использовать, будет гораздо проще добиться того, что вы хотите, например:

.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>
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы