鍍金池/ 問答/HTML/ 我的ui是v-for循環(huán)出來的，頁面上有三個ul，每次點擊的時候顯示一個ul，每

我的ui是v-for循環(huán)出來的，頁面上有三個ul，每次點擊的時候顯示一個ul，每次顯示的時候我都會看到上一個ul的文字閃一下

我的ul是v-for循環(huán)出來的，頁面上有三個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>

頁面的效果是這樣的

clipboard.png

我點擊添加設備的時候

clipboard.png

每次當我點擊添加設備的時候 上一次的內容都會閃一下，請問這個怎么才能讓他不閃呢？

回答
編輯回答
安若晴

應該是你對數(shù)據(jù)修改后導致了整個數(shù)組UI的重繪。
vue2中有對應的解決方案vue文檔
簡單來說，v-for循環(huán)時，每個綁定一個不相同的key值，數(shù)據(jù)發(fā)生變化時，就會只重繪對應key的UI，減少性能損耗，也就不會出現(xiàn)lz的閃一下的問題。
如果對于這個地方還有什么疑惑，可以看一下這個鏈接，做實驗有助于理解。

2018年7月11日 08:10