使用 Vue.js 悬停元素时如何动态更改文本？答案

【问题标题】：How to dynamically change a text when hovering an element with Vue.js?使用 Vue.js 悬停元素时如何动态更改文本？
【发布时间】：2016-11-11 01:16:10
【问题描述】：

我的 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> 包装每个图像，但它也不起作用。

我该怎么办？

【问题讨论】：

即使 Neves 的解决方案是正确的，也或多或少是我已经做过的。问题是由<div> 被包裹在另一个<div> 中引起的，该<div> 应用了一个Vue 对象。（我不知道是否可以理解，对不起我的英语不好）

标签： javascript html vue.js

【解决方案1】：

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>

【讨论】：

这正是我所做的......除了我将它包装在另一个 <div> 中以便使用 Vue 应用动态样式。