javascript - Several places on a page need to be clicked to display and then clicked to hide. How to implement this in Vue?

Question

As shown in the figure, click on the first li and all the p's of li will be displayed.
Clicking on the second li, the first li and the third li have also changed. How can I click which li and display the p element in which li? . .

##

Answer 1

Set one current

@click = "current = 1"

v-show = "current == 1"

Answer 2

You’ll understand if you look at the code:

Answer 3

Correct answer on the first floor. You can also use v-if. However, it is recommended that the @click binding function be written in a more standardized way in methods.

Answer 4

Think data driven⤴

Answer 5

Should this be written using event delegation? You bind click to ul, determine which li the clicked event.target is, and then switch the display, it should be fine

Answer 6

Set three variables