如何在元素悬停时动态改变文本

How to dynamically change a text when hovering an element with Vue.js?

本文关键字：动态 改变 文本 悬停 元素      更新时间：2023-09-26

我有这个在我的HTML页面:

<div class="hello">
  <img @mouseover="hover='A'" @mouseleave="hover=''" src="a.png" alt="A" />
  <img @mouseover="hover='B'" @mouseleave="hover=''" src="b.png" alt="B" />
  <br /><br />
  <span>{{ hover }}</span>
</div>

在我的脚本中:

var hello = new Vue({
  el: ".hello",
  data: {
      hover: ''
  }
});

但是当我将图像悬停时，文本不会改变。我尝试用<span>包装每个图像，但它也不起作用。

我该怎么办?

new Vue({
  el: '.hello',
  data: {
    hover: ''
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.5/vue.min.js"></script>
<div class="hello">
  <img @mouseover="hover='A'" @mouseleave="hover=''" src="http://lorempixel.com/400/200/sports/1" alt="a">
  
  <img @mouseover="hover='B'" @mouseleave="hover=''" src="http://lorempixel.com/400/200/sports/2" alt="B">
  
  <br>
  
  <span>Hover: {{ hover }}</span>
</div>

相关文章：