我的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的闪一下的问题。
如果对于这个地方还有什么疑惑，可以看一下这个链接，做实验有助于理解。