javascript - vue3 类处于事件状态时如何切换事件

Question

问题

如果“事件”类添加到元素，我想切换事件。我怎样才能实现这个目标？

在我看来，它可以通过观察者方法以某种方式实现，但我不知道如何观察类名是否应用于元素。

我正在使用vue3 .

编辑

我有一个轮播，您可以在其中滑动一些 div，并且可见的类将处于“事件”状态。我想监视所有 div，如果它们处于事件状态，则调用一个函数。

Answer 1

下面是一个以声明方式实现此目的的示例。

const { watch, ref } = Vue;

const CarouselItem = {
    props: ['item'],

    template: `<h1 :class="{ ...item }">{{ item.name }}</h1>`,

    setup(props) {
        watch(
            props.item,
            (item, prevItem) => item.active && console.log(`${item.name} made active!`),
        );
    }
};

Vue.createApp({
    components: { CarouselItem },

    template: '<CarouselItem v-for="item in items" :item="item" />',

    setup() {
        const items = ref([
            { name: 'Doril', active: false },
            { name: 'Daneo', active: false },      
            { name: 'Mosan', active: false },
        ]);

        // simulate a carousel item being made active
        setTimeout(() => items.value[1].active = true, 1000);

        return { items };
    },
}).mount('#app');

.active {
    color: red;
}

<script src="https://unpkg.com/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6a1c1f0f2a59445a445d" rel="noreferrer noopener nofollow">[email protected]</a>/dist/vue.global.js"></script>

<div id="app"></div>