vue中v-for出来的div如有div1有div3，先显示了div3，那下一个条件成立div1显示的时候会把div3挤下去

Question

vue中v-for出来的div如有div1有div3，条件成立先显示了div3，那下一个条件成立div1显示的时候会把div3挤下去，这种怎么解决呢？

我循环的代码是

        <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>

我想要的效果是 刚进去是这样的

条件成立的时候显示了 div1

这样会把div2 和 div3挤下去的， 为了用户体验挤下去不好，怎么才能原来显示的div在上面，然后条件成立显示的在后面一个个添加出来呢？

Answer 1

最好不要在模板里面写逻辑
看你这个应该是过滤出一个数组，然后循环遍历输出这个数组，使用computed吧