Vuetify.js：使用v-hover组件在鼠标悬停事件上设置CSS类

Question

我试图根据是否有鼠标悬停来更改类以应用于Vuetify.js组件：

<v-card
    class="mx-auto"
    width="344"
  >
    <v-hover>
    <v-card-title
      slot-scope="hover"
      :class="`${hover? class1: class2}`">
      <div>
        <span class="headline">Hover</span>              
        </div>
      </div>

    </v-card-title>
    </v-hover>
  </v-card>

CSS类只需设置background-color属性：

.class1 {
  background-color:red;
}

.class2 {
  background-color:blue;
}

由于某种原因，这不起作用。我想念什么？

Codepen.

Answer 1

您在道具type Foo interface { methodA() } type Bar struct { Foo // this can be initialized with any concrete implementation of Foo } func (b Bar) methodB () { ... } 的绑定中缺少引号，而在class道具中的弯括号中缺少了。

应该这样定义：

slot-scope

---

Working CodePen

Vuetify Hover Doc