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

我的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>

但当我将图像悬停时，文本不会改变。我尝试用

包装每个图像，但也不起作用

我该怎么办？

newvue({
艾尔：'你好'，
数据：{
悬停：“”
}
})

悬停：{{Hover}

newvue({
艾尔：'你好'，
数据：{
悬停：“”
}
})

悬停：{{Hover}

这正是我所做的。。。除了我在另一个

中包装它，以便在Vue中应用动态样式。这正是我所做的。。。除了我在另一个

中包装它，以便在Vue中应用动态样式。即使Neves的解决方案是正确的，也或多或少是我已经做过的。问题是由于将

包装在另一个应用了Vue对象的

中造成的。（我不知道这是否可以理解，抱歉我的英语不好）即使内维斯的解决方案是正确的，这或多或少是我已经做过的。问题是由于将

包装在另一个应用了Vue对象的

中造成的。（我不知道这是否可以理解，抱歉我的英语不好）

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