Solve the problem of vue click control of single style

Since we control a single style, the content in our html must be v-for=""; when rendering, you must develop a good habit, v-for="(item,index) in items"; index is what we call index.

<div class="border" v-for="(item,index) in tolos" :key="index">

The project I'm doing is similar to WeChat Moments. Like and comment buttons pop up, and clicking on one will pop up. What we want to solve is to click on one and only pop up the corresponding one, and the button button corresponds to the INDEX.

This index corresponds to the index in v-for;

Since the background of the company's development is C#, two @@ must be used to call the click event, the function content of the function clickBt is:

<div @@click="clickBt(index)" class="clickBt"><i class="fa fa-envelope fa-lg message"></i></div>

Active index is defined in data

// clickBt: function (index) {
// var _this = this;
// (111,index);
// _this.activeindex = index;
// _this.clickTf = !_this.clickTf;
// },

Finally, in the div we need to pop up, we write v-class: and v-if to call each other:

<div class="clickDiv" v-bind:class="{'slide':clickTf}" v-if="index == activeindex">

No, I just hope that I can solve the same problem myself when I encounter it in the future!

The above article solves the problem of vue click control single styles is all the content I share with you. I hope it can give you a reference and I hope you can support me more.