Vue.js 这是可行的，但我认为它违背了使用框架的目的

我对使用vue和js非常陌生，我创建了一个照片库，我想降低所选照片的不透明度，然后在我更改照片时将其重置代码可以工作，但我觉得可以做得更好。我正在我的changeImage（）函数元素中选择我不喜欢的dom元素。我可以在不选择dom的情况下执行此操作吗？看起来如果这很简单，我就是想不出来

<template>
<div class="container">
  <div class="main_image">
    <img class = "current" :src="activeImage">
  </div>
  <div  class="images">
    <img  v-for="(image,index) in imageSrcs" v-bind:key="index" v-bind:src="image" @click="changeImage" class = "pics">

  </div>
</div>
</template>

<script>
import { setTimeout } from 'timers';

export default {
  name: 'Gallery',
  data () {
    return {
      activeImage: '../assets/house1.jpeg',
      imageSrcs:['../assets/house1.jpeg','../assets/sail.jpeg','../assets/castel.jpeg','../assets/train.jpeg','../assets/house3.jpeg','../assets/house2.jpeg',],
    }
  },
  methods:{
    changeImage: function(e){
      const pics = document.querySelectorAll('.pics')
      const current = document.querySelector('.current');

      pics.forEach((pic)=>{
        pic.style.opacity = 1;
      })

    this.activeImage = e.target.src

    current.classList.add('fadeIn');

    setTimeout(()=>{
      current.classList.remove('fadeIn');
    },550)



    e.target.style.opacity = .5;
    }

  }
}
</script>


<style scoped>
@keyframes fadeIn{
  to{
    opacity: 1;
  }
}

.fadeIn{
opacity: 0;
animation: fadeIn 500ms ease-in;

}

.main_image img{
  height: 400px;
  width: 100%;
}

.container{
margin: 0 auto;
max-width: 760px;
}

.images{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 3px;
overflow: hidden;

}

.images img{
  height: 150px;
  width: 100%
}
</style>

从“计时器”导入{setTimeout}；
导出默认值{
名称：'画廊'，
数据（）{
返回{
activeImage:“../assets/house1.jpeg”，
imageSrcs:['../assets/house1.jpeg'，'../assets/sail.jpeg'，'../assets/castel.jpeg'，'../assets/train.jpeg'，'../assets/house3.jpeg'，'../assets/house2.jpeg'，]，
}
},
方法：{
changeImage:函数（e）{
const pics=document.queryselectoral（“.pics”）
const current=document.querySelector（'.current'）；
图片forEach（（图片）=>{
pic.style.opacity=1；
})
this.activeImage=e.target.src
current.classList.add（'fadeIn'）；
设置超时（（）=>{
current.classList.remove（'fadeIn'）；
},550)
e、 target.style.opacity=.5；
}
}
}
@关键帧淡入淡出{
到{
不透明度：1；
}
}
法丹先生{
不透明度：0；
动画：fadeIn 500毫秒缓进；
}
.main_图像img{
高度：400px；
宽度：100%；
}
.集装箱{
保证金：0自动；
最大宽度：760像素；
}
.图像{
显示：网格；
网格模板柱：1fr 1fr 1fr；
网格间距：3倍；
溢出：隐藏；
}
.图像img{
高度：150像素；
宽度：100%
}

这里使用Vue.js被动绑定的一种相当简单的方法是在单击图像时动态设置CSS类

<img  
        v-for="(image,index) in imageSrcs" 
        v-bind:key="index" 
        v-bind:src="image" 
        @click="changeImage(index)" 
        :class="image == activeImage ? 'selected' : ''"
    >

和一个CSS类来应用不透明度

<style scoped>
.selected {
  opacity: 0.5;
}
<style>

.选定{
不透明度：0.5；
}

<style scoped>
.selected {
  opacity: 0.5;
}
<style>