vue project realization render list Gets the current item Click (highlight)

A simple example:

This is a list of the rendering code

A data set in the initial value 0,

<div v-for="(item, index) in tochildren" :key="index" @click="currentIndex=index" :class="{style1:index==currentIndex}">{{item}}</div>

But also to achieve a core demand is mainly bound property if a style is true, change the current index value assigned by click is the click of the current index to cureentIndex, clicked at this time that will be displayed style1 style

 

For a list of hardcoded page how to obtain the same lines of the current sub-element of it

<ul>

<Li: class = "{style1: index == 1}" @ click = "index = 1"> This is the first line </ li>

<Li: class = "{style1: index == 2}" @ click = "index = 2"> This is the second line </ li>

</ul>

This time, only the index is written dead

 

This idea can be used to solve to get the current highlight clicking on the object, I do not know whether to help you do? Come on!