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

Question

[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, но как это реализовать - не понимаю.

Буду благодарен за помощь.

Answer 1

[0xD34F]

<span class="b-span" :class="{ 'b-span_active': active }">hello, world!!</span>
<button @click="onClick">click me</button>

data: () => ({
  active: false,
  time: 300,
}),
methods: {
  onClick() {
    setTimeout(() => this.active = true, this.time);
  },
},

Comments

[aweui]

Спасибо. Вы поняли меня так как нужно, несмотря на то, что я задал вопрос коряво))

Answer 2

[Владимир Мальков]

Создайте обработчик на

некий клик

Вида:

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

Comments

[shmatuan]

Только

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

+ можно через this.$refs
и в html:
<span ref="spanActive">