How to set a tag class after a certain time?

Question

Vue.js

Good day.
There is this code:

<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>

It is assumed that a certain click will occur, after which the b-span_active class will be added to this span. dataTime: '300', - this is the same interval in m / s, through which the class should be added. Of course, settimeout comes to mind, but I don’t understand how to implement it.
I will be grateful for help.

Answer 1

<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);
  },
},

Answer 2

Create a handler for

some click

Type:

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