Vue implements active click switch, and vueactive click Switch

Vue implements active click switch, and vueactive click Switch

Loop:

1. input the index when you click (obtain the currently clicked index)

@ Click = "active (index )"

2. Pass the index value into the class (when the index is equal to a few, the first few to add the active class)

: Class = "{active: index = ins }"

3. Add ins: 0 in data (indicating that the first active class is added by default)

Data {ins: 0}

4. Add the method in methods.

Ctive (num) {this. ins = num}

Non-circular:

1. Write click events and added class styles into the tag.

Note: class = "{active: shows = 1}" means to add class = active when shows = 1; otherwise, no.

2. Define methods in methods

The effect is as follows:

This completes the click switching effect.

Additional:

Filter arrow switching using the three trees Operator

The above Vue implementation active click switch method is all the content shared by Alibaba Cloud xiaobian. I hope to give you a reference and support for the customer's house.