Vue uses data-driven thought to achieve operation dom?

html structure:

<ul>
    <li>
        <div class="show">
            <img src="1.png" alt="">
            1
        </div>
        <div class="hide">
            1
        </div>
    </li>
    <li>
        <div class="show">
            <img src="2.png" alt="">
            2
        </div>
        <div class="hide">
            2
        </div>
    </li>
    <li>
        <div class="show">
            <img src="3.png" alt="">
            3
        </div>
        <div class="hide">
            3
        </div>
    </li>
</ul>

because most of the structural content is data that does not need to change, the method of writing directly to death is adopted, and no loop is used. The page structure is to display all show-style div, under all li tags by default, so how to click the corresponding li tag to show the hide-style div while other hide-style div is hidden? Now how to achieve through the vue data-driven idea?

Jquery front-end-engineering vue.js javascript

Mar.06,2021

set up flag , use v-show to control the hidden display, or select class according to flag .
here flag is the data, and it would be troublesome to write without a loop here.

add an activeIndex

<li v-for="(item,index) in something" :key="index" @click="activeINdex=index">
<div class="show" v-show="activeIndex!=index?true:false">
            <img src="3.png" alt="">
            3
        </div>
        <div class="hide" v-show="activeIndex==index?true:false">
            3
        </div>

</li>

first method: IsShow needs to be defined in data; change IsShow value by clicking event trigger; hide Hidden attribute spelling is not correct, but colons must not be lost.
< div class= "show": hide='IsShow' >
< div class= "hide": hideaway events IsShow' >
the second method: add v-if/v-show to the
tag and then click the event trigger to achieve

third method:
v-band:class binds a dynamic class instead of a written class, then triggers it by clicking on the event, and then defines the style in the css. This is more complicated.
the above is a personal experience and opinion. If there is any difference, please advise

Previous: Element-ui overrides css,. Why does it work normally in development mode, but not after build?

Next: How to get python to call a function multiple times. Add the values returned by the function

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1e483c8-4c3a2.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1e483c8-4c3a2.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?