@aweui

Как задать тегу класс через определенное время?

Доброго дня.
Есть такой код:

<template>
  <div>
    <span class="b-span"
	// v-bind:class="{ 'b-span_active' }" ???
    >
    </span>
  </div>
</template>

<script>
export default {
	name: 'name',
	data () {
		return {
      dataTime: '300',
		}
	}
}
</script>


Предполагается, что произойдет некий клик, после которого данному span-у добавится класс b-span_active. dataTime: '300', - это тот самый интервал в м/с., через который должен добавится класс. На ум приходит конечно же settimeout, но как это реализовать - не понимаю.

Буду благодарен за помощь.
  • Вопрос задан
  • 82 просмотра
Решения вопроса 1
0xD34F
@0xD34F Куратор тега Vue.js
<span class="b-span" :class="{ 'b-span_active': active }">hello, world!!</span>
<button @click="onClick">click me</button>

data() {
  return {
    active: false,
    time: 300,
  };
},
methods: {
  onClick() {
    setTimeout(() => this.active = true, this.time);
  },
},
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
MalkovVladimir73
@MalkovVladimir73
Fullstack (asp.net + vue.js)
Создайте обработчик на
некий клик

Вида:
function () {
  setTimeout(300, () => {
    var span = document.querySelector('.b-span') // либо селектор по id
    span.classList.add('b-span_active')
  }
}
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
MXP
от 120 000 до 140 000 руб.
Страховой Кабинет Нижний Новгород
от 60 000 до 90 000 руб.
Posh Space Москва
от 160 000 до 180 000 руб.
27 июн. 2019, в 01:26
50000 руб./за проект
27 июн. 2019, в 00:27
250000 руб./за проект