用Vue.js懸停元素時如何動態更改文本？

Question

我在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>包裝每個圖像，但是它也不起作用。

我該怎么辦？

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