vue.js：检查css类是否在模板中绑定

Question

我正在学习Vue.js因此很新。我很难检查我的班级是否动态绑定。我试图增加效果：当我将鼠标悬停在卡片上时，它应该向上移动一点并改变它的颜色。此外，不仅css而且自定义事件也不起作用。

这是我的卡组件：

Vue.component('card', {

    props: ['def'],

    template: `
        <div class="card" :class="'type-' + def.type" @click="play">

            <div class="title">{{ def.title }}</div>
            <img class="separator" src="svg/card-separator.svg" />

            <div class="description">
                <div v-html="def.description"></div>
            </div>
            <div class="note" v-if="def.note">
                <div v-html="def.note"></div>
            </div>
        </div>
    `,

    methods: {
        play() {
            this.$emit('play')
            this.$emit('test_event_with_args', 'str_arg', 777)
        }
    },

    mounted() {
        this.$on("play", ()=> {
            console.log("custom event play ni tutdim ready hook ni ichida")
        })

        this.$on('test_event_with_args', (str, num) => {
            console.log(`Test_Event: str=${str}, num=${num}`);
        })
    }

});

以下是我的css文件的摘录：

.card:hover{
    top: -5px
}

.card.type-attack{
    background:#9b1b1b
}
.card.type-special{
    background:#751b9b
}
.card.type-support{
    background:#1b6e9b
}