如何在vue.js中显示特定悬停卡片的悬停内容？

data() {
  return {
    hoverCard: null
  };
}

<div v-for="card in cards" :key="card.id">
  <div @mouseover="hoverCard = card" @mouseleave="hoverCard = null">
    {{ card.title }}
  </div>
  <div v-if="hoverCard === card">
    {{ card.content }}
  </div>
</div>

methods: {
  getCards() {
    // 从后端或其他数据源获取卡片列表数据
    // 并将数据赋值给this.cards
  }
}

created() {
  this.getCards();
}