鍍金池/ 問答/HTML5  HTML/ vue如何實現(xiàn)點擊圖片放大其他圖片縮小

vue如何實現(xiàn)點擊圖片放大其他圖片縮小

如一個列表里面有三張圖片,點擊其中一張圖片,該圖片放大,再次點擊圖片則縮小,如點擊另一張圖片,該圖片會放大,而你剛剛的那張圖片會縮小回去,應(yīng)該如何實現(xiàn),最好附帶一下代碼~

回答
編輯回答
離人歸
2017年5月2日 14:57
編輯回答
失魂人
<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);
}
2018年7月14日 02:27