如何将Vue数组的各个元素绑定到类

Question

我的vue组件中有一个从API返回的图像数组，其迭代和显示方式如下：

<span v-for="pic in pics">
   <img :src="'images/'+pic" onmouseover="highlight(pic)" :class="{isHovered = hovered}" />
</span>

在我的脚本中：

data(){
    return {
       pics: [],
       hovered: false,
    }
},
methods:{
   highlight(pic){
       this.hovered = true;
  } 
}

在我的CSS中

isHovered{
    border: 2px solid red;
    scale: 1.2;
    cursor: pointer;
}

问题是每当我将鼠标悬停在一个图像上时，所有图像都将返回isHovered类。我的意图是仅将悬停的图像绑定到isHovered类。请问我在做什么错。任何指导将不胜感激。

Answer 1

我正在阅读OP，但找不到答案，为什么不能仅使用CSS？为此，使用Vue的逻辑实在是太过分了。

// thanks to @C2486 for the snippet
var app = new Vue({
  el: "#app",
  data() {
    return {
      pics: [{
        img: "https://i.ytimg.com/vi/qV6y1SksAcE/maxresdefault.jpg"
      }, {
        img: "http://www.memorandum.com/wp-content/uploads/2018/05/trunk-club-memorandum-closet-staples-chic-working-girl-professional-women-capsule-wardrobe-10.jpg"
      }, {
        img: "http://www.memorandum.com/wp-content/uploads/2018/07/top-working-women-career-sites-17-680x1020.jpg"
      }]
    }
  }
});

.some-img-class:hover {
  border: 3px solid red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div>
    <div v-for="(pic,index) in pics">
      {{index+1}}
      <img :src="pic.img" width="60" class="some-img-class" />
    </div>
  </div>
</div>