我的ui是v-for循环出来的，页面上有三个ul，每次点击的时候显示一个ul，每次显示的时候我都会

Question

我的ul是v-for循环出来的，页面上有三个ul，每次点击的时候显示一个ul，每次显示的时候我都会看到上一个ul里面的li的文字闪一下，请问这怎么解决呢？

         <ul  v-for="(item,key) in newList">         

        <li>

        <span class="span_three" :title="item.areaName">{{item.areaName}}</span>

        <button @click="tianjian(item,key)" class="tianjian_lei">确定</button>

        </li>

         </ul>

         

页面的效果是这样的

我点击添加设备的时候

每次当我点击添加设备的时候 上一次的内容都会闪一下，请问这个怎么才能让他不闪呢？

Answer 1

应该是你对数据修改后导致了整个数组UI的重绘。vue2中有对应的解决方案vue文档简单来说，v-for循环时，每个绑定一个不相同的key值，数据发生变化时，就会只重绘对应key的UI，减少性能损耗，也就不会出现lz的闪一下的问题。如果对于这个地方还有什么疑惑，可以看一下这个链接，做实验有助于理解。