If the div that comes out of v-for in vue has div1 or div3, it will show div3, first, then the next condition will squeeze div3 down when it is set up for div1 display.

if the div from v-for in vue shows that div1 has a div3, condition, it first shows that div3, will be squeezed out of div3 when the next condition is set up for div1 display. How to solve this problem?

the code for my loop is

        <div class="big" v-for="(item,i) in newList" v-show="item.xianshide">
                <table>
                        <tr>
                            <td colspan="3">{{item.deviceName}}</td>
                        </tr>
                            <tr v-for="(x,y) in item.list">
                            <td>{{x.unitName}}</td>
                            <td>{{x.itemName}}</td>
                        </tr>
                </table>
                </div>

what I want is that I just went in. It"s like this.

clipboard.png

div1

clipboard.png

this will squeeze div2 and div3 down. For the sake of the user experience, how can the original displayed div be on top, and then the conditionally displayed ones be added one by one?

Mar.02,2021

it's best not to write logic in the template
look at you, this should be Filter to produce an array, and then loop through the output array. Use computed

.
Menu