Question

我正在使用Vuetify，v-img :src上有一个imageA，仅在悬停时需要替换为imageB。现在，它会在悬停时进行替换，并且在鼠标移出时不会更改。

我已经尝试过@mouseover

<v-img
  :src="imageA"
  width="200px"
  height="auto"
  @mouseover="imageA = imageB"
>

data() {
  return {
    imageA: require('@/assets/images/imageA.jpg'),
    imageB: require('@/assets/images/imageB.jpg'),
  }
}

还有@mouseenter / @mouseleave：

@mouseenter="imageA = imageB"
@mouseleave="imageB = imageA"

谢谢

Answer 1

已解决v-hover

<v-hover>
  <v-img
    slot-scope="{ hover }"
    v-if="hover"
    :src="imageB"
    width="200px"
    height="auto"
  >
  </v-img>
  <v-img
    v-else
    :src="imageA"
    width="200px"
    height="auto"
  >
  </v-img>
</v-hover>

如何使用@mouseover更改v-img组件上的图像？

1 个答案: