My ui is looped out by v-for, and there are three ul, on the page showing a ul, every time I click, and every time I display it, I see the text of the last ul flash.

my ul is looped out by v-for. There are three ul, on the page showing a ul, every time I click. Every time I display it, I will see the li text in the last ul flash. How can I solve this?

         <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>
         
The effect of the

page is like this

clipboard.png

clipboard.png

every time I click to add a device, the last content flashes. How can I keep it from flashing?

Mar.01,2021

it should be your changes to the data that lead to the redrawing of the entire array UI.
vue2 there is a corresponding solution ide/list.html-sharpkey" rel=" nofollow noreferrer "> vue document
to put it simply, when the v-for loop, each bind a different key value, when the data changes, it will only redraw the UI, corresponding to the key to reduce performance loss, and there will be no flash problem of lz.
if you have any doubts about this place, you can take a look at the link to help you understand.

Menu