鼠标悬停时的Vue动态图像

xqnpmsa8 于 2022-12-30 发布在 Vue.js

关注(0)|答案(2)|浏览(146)

我写了这样的代码

<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？

vue.js

来源：https://stackoverflow.com/questions/74935930/vue-dynamic-img-with-mouseover

2条答案

按热度按时间

nx7onnlm1#

根据this question，您可以使用如下代码：

<template>
  <nav id="header-nav">
    <router-link to="/" class="logo">
      <img id='header-logo' :src="getImageUrl(curlogo)"
           @mouseover="logo='logo.svg'" @mouseout="logo='index.jpg'"/>
    </router-link>
  </nav>
</template>

<script setup>
import {ref} from "vue";
const getImageUrl = (name) => {
  return new URL(`../assets/${name}`, import.meta.url).href
}
const logo=ref('index.jpg');
let curlogo = ref(logo)
</script>

您应该将../assets/${name}和图像名称更改为您的图像路径和名称。

赞(0）回复(0）举报 2022-12-30

pb3s4cty2#

这是我最后的代码，运行良好，谢谢。

<template>
    <nav id="header-nav">
        <router-link to="/" class="" >
            <img class="header-logo" :src="getImageUrl(curlogo)" @mouseover="curlogo=logo_over" @mouseout="curlogo=logo">
        </router-link>

    </nav>
</template>
    
<script setup>
import { ref } from "vue";
const getImageUrl = name => {
    return name
}
const logo = require("../assets/logo.png")
const logo_over = require("../assets/logo_over.png")
const curlogo = ref(logo);
</script>

赞(0）回复(0）举报 2022-12-30

我来回答

鼠标悬停时的Vue动态图像

2条答案

相关问题

热门标签

最新问答