如果类处于活动状态vue3如何切换事件答案

【问题标题】：How to toggle event if class is active vue3如果类处于活动状态vue3如何切换事件
【发布时间】：2021-06-06 06:49:00
【问题描述】：

问题

如果“活动”类被添加到元素中，我想切换一个事件。我怎样才能做到这一点？

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

我正在使用vue3。

编辑

我有一个旋转木马，您可以在其中滑过一些 div，并且可见的让类“活跃”。我想查看所有的 div，如果它们被激活，则调用一个函数。

【问题讨论】：

你能多解释一下你想要实现什么吗？你看过conditional rendering和class bindings吗？
@wittgenstein 我已经编辑了我的问题并添加了一些细节，让我知道现在是否清楚
这个解决方案将违背“声明性”的想法。 DOM 应该响应数据变化，很少直接访问它。您可以从轮播项目中制作一个组件，并让它监视 active 道具或数据。

标签： javascript html vue.js vuejs3

【解决方案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/vue@3.0.7/dist/vue.global.js"></script>

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

【讨论】：