这行得通，但我认为它违背了使用框架的目的

Question

我对使用 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>

Answer 1

此处使用 Vue.js 反应式绑定的一种相当简单的方法是在单击图像时动态设置 CSS class。

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

您处理点击的方法只需设置 activeImage 属性即可。

methods: {
    changeImage: function(i) {
      this.activeImage = this.imageSrcs[i];
    }
  }

和 CSS class 应用不透明度

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

这行得通，但我认为它违背了使用框架的目的

This works but I think it defeats the purpose of using a framework

vue.js

vue-component