我写了这样的代码
<template>
<nav id="header-nav">
<router-link to="/" class="logo">
<img id='header-logo' :src="curlogo"
@mouseover="curlogo=logo_over"
@mouseleave="curlogo=logo"/>
</router-link>
</nav>
</template>
<script>
export default {
data() {
return {
logo: require("@/../public/logo.png"),
logo_over: require("@/../public/logo_over.png"),
curlogo: require("@/../public/logo.png"),
}
},
}
</script>
当我鼠标移到img上时,它会改变img。但是,我用script setup
重写了vue代码。template
代码是一样的,我像这样改变了script
代码。
<script setup>
const logo=require("@/../public/logo.png")
const logo_over=require("@/../public/logo_over.png")
let curlogo = logo
</script>
但是...这不是工作。我怎么能用mouseover与img?
2条答案
按热度按时间nx7onnlm1#
根据this question,您可以使用如下代码:
您应该将
../assets/${name}
和图像名称更改为您的图像路径和名称。pb3s4cty2#
这是我最后的代码,运行良好,谢谢。