<!-- In the v-for directive you can get the index of the element v-for="(profile, index)

Use that index to only show the style you want it, in your template.

for example. -->



new Vue({
  el: '#app',
  data: {
    selected : 0
  }
})


<!-- CSS -->

.selectedClass {
  background: lightblue
}

.hoverClass:hover {
  background: lightcoral
}


<!-- Script -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<main id="app">
  <div v-for="(elem, index) in 4">
    <p class="hoverClass" :class="{'selectedClass': selected === index}" @click="selected = index" >{{elem}}</p>
  </div>
</main>
https://stackoverflow.com/posts/54025706/edit#


<!-- Edited-->

<!-- It's perfeclty fine combine class="..." with the Vue binding :class="..."

-->

<!-- Edited 2-->

<!-- For nested v-for declare another name for index.
-->


new Vue({
  el: '#app'
})


<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<main id="app">
    <div v-for="(item, i) in 2">
       <div v-for="(elem, j) in 3">
        v-for item {{ i }} v-for elem {{ j }}
       </div>
    </div>
</main>