Question

我有一个带有图像列表的div标签，并且需要向单击的image中添加CSS类。我尝试使用下面的代码。

<div v-for="kudo in catkudo" style="width:20%;float:left;display:block;height:80px;"
     onMouseOver="this.style.border='1px solid #0F0'" onMouseOut="this.style.border='1px solid transparent'">
    <div @click="e => e.target.classList.toggle('active')">
        <img style="width:40%" v-bind:value="kudo.id" @click="select(kudo.id)" v-model="kudocat"
             :src="'/kudosuploads/badges/'+kudo.image" alt="">
        <p>{{ kudo.catname }}</p>
    </div>
</div>

@click="e => e.target.classList.toggle('active')"

<style>
    #kudos .active, #kudos img.active ~ p {
        color: red;
    }
</style>

它将CSS类添加到我们单击的每个图像中。我需要将CSS类仅添加到单击的图像中。

示例当用户单击图像时，一个需要添加CSS类，而用户再次单击同一图像CSS类，则需要删除＆用户单击图像两个，则需要从图像一中删除添加的CSS类，然后添加到图像二中。

Answer 1

您需要使用功能进行切换

<template>
    <div v-for="(kudo, index) in catkudo" class="class">
       <div>
          <img v-bind:class="{ active: isActive == index }" style="width:40%"  v-bind:value="kudo.id" v-model="kudocat" @click="changeSelected(index)" :src="'/kudosuploads/badges/'+kudo.image" alt=""  >
          <p >{{ kudo.catname }}</p>
       </div>
    </div>
</template>
<script>
export default{
    data() {
        isActive: ''
    },
   methods: {
       changeSelected(index) {
           this.isActive = (index == this.isActive ? '' : index);
       }
   }
}
</script>

<style>
   .class {
       width:20%;
       float:left;
       display:block;
       height:80px;
   }
   .class:hover {
       border: 1px solid #0F0;
   }
</style>

如何在Vue.js中向点击的图像添加CSS类

1 个答案: