Vue中的img hover效果可以帶來(lái)更好的用戶(hù)體驗(yàn)，讓圖片更生動(dòng)、更具吸引力。下面我們來(lái)看看如何使用Vue實(shí)現(xiàn)這一效果。

<template>
<div class="container">
<img src="image.jpg" v-bind:class="{hover: isHover}" v-on:mouseenter="isHover = true" v-on:mouseleave="isHover = false">
</div>
</template>
<style>
.hover {
opacity: 0.8;
transform: scale(1.1);
}
</style>
<script>
export default {
data() {
return {
isHover: false
}
}
}
</script>

代碼中首先引入了一個(gè)image.jpg圖片，然后利用v-bind指令綁定class，當(dāng)isHover為true時(shí)，會(huì)添加hover類(lèi)名，從而實(shí)現(xiàn)hover效果。接著使用v-on指令綁定mouseenter和mouseleave事件，當(dāng)鼠標(biāo)進(jìn)入或離開(kāi)圖片時(shí)，isHover值會(huì)發(fā)生相應(yīng)變化。最后，在樣式中定義了hover類(lèi)名的具體表現(xiàn)。

需要注意的是，為了正確引入圖片，需要在Vue.config.js或webpack.base.config.js配置文件中添加以下代碼：

module.exports = {
entry: …,
output: …,
resolve: {
alias: {
'image.jpg': path.resolve(__dirname, 'path/to/image.jpg')
}
}
};

這樣就可以成功引入并使用hover效果啦！