vue如何实现点击图片放大其他图片缩小

如一个列表里面有三张图片,点击其中一张图片,该图片放大,再次点击图片则缩小,如点击另一张图片,该图片会放大,而你刚刚的那张图片会缩小回去,应该如何实现,最好附带一下代码~

阅读 8.4k
3 个回答
<li v-for="(item, index) in list" @click="select(index)" :class="{big: index===selectIndex}">
  <img :src="item.src"/>
<li>
data: {
  selectIndex: undefined
},
methods: {
  select (index) {
    this.selectIndex = this.selectIndex === index ? undefined : index
  }
}
 img{
  transition: all .5s linear;
  transform: scale(1);
}
.big{
  transform: scale(2);
}
新手上路,请多包涵
新手上路,请多包涵
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题