Чтобы добавить или удалить класс каждые 3 секунды в Vue.js, можно использовать директиву v-bind:class вместе с методом setInterval для запуска функции с определенной периодичностью.
Ниже приведен пример кода, который добавляет класс highlight к элементу каждые 3 секунды, а затем удаляет его:
<template>
<div :class="{ 'highlight': isHighlighted }">Hello, World!</div>
</template>
<script>
export default {
data() {
return {
isHighlighted: false,
intervalId: null
};
},
mounted() {
this.intervalId = setInterval(() => {
this.isHighlighted = !this.isHighlighted;
}, 3000);
},
beforeDestroy() {
clearInterval(this.intervalId);
}
};
</script>
<style>
.highlight {
background-color: yellow;
}
</style>
В этом примере создается переменная isHighlighted, которая определяет, добавлять ли класс highlight или нет. Затем в методе mounted используется setInterval, чтобы каждые 3 секунды менять значение isHighlighted и добавлять или удалять класс highlight.
Также важно очистить интервал при уничтожении компонента, что делается в методе beforeDestroy с помощью clearInterval(this.intervalId), чтобы избежать утечки памяти.
Надеюсь, что этот ответ был полезен и помог вам понять, как добавить или удалить классы каждые 3 секунды в Vue.js. Если у вас возникнут дополнительные вопросы, не стесняйтесь спрашивать!