How vue.js controls each item in the list

This article mainly shares with you how vue.js controls each item in the list. I hope it can help you.

eg:

<p v-for="(i,index) in resultful_list" class="my_similar_collect_p" >
    <p v-bind:class="{add_class:i.isActive}" 
    style="height: 200px; font-size: 14px; width: 100%; color: rgb(122,122,122);" class="old_class">
         <p style="margin-top: 8px;">
              <span style="color: rgb(64,158,255);">：</span>
                  <span v-if="x.name.length<70"   v-for="x in i.disease.disease"
                   style=" display:inline-block;font-size: 14px; margin-right:5px;color:#7A7A7A;">
                   <span v-if="x.name">{{x.name}}</span>
                   </span>
                   <span v-if="i.disease.disease"></span>
                   <span v-else>无</span>
                   <span v-if="x.name && x.name.length>=70"  v-for="x in i.disease.disease"
                   style=" display:inline-block;font-size: 14px; margin-right:5px;color:#7A7A7A;">
                   {{x.name.substring(0,70) + &#39;...&#39;}}</span>
         </p>
    </p>
</p>

As above, in a list (v-for) loop, I want to control the changes of each item in the list. We need to bind the class to it

 v-bind:class="{add_class:i.isActive}"

add_class is the class we want to add, and i.isActive is the key to controlling each item.

Note:

We must ensure that the array we are traversing has the isActive attribute and has assigned an initial value to it. Otherwise we need to manually add the isActive attribute to it.

var obj = {
    isActive:false,
   }
resultful_list.push(obj);

The above is the detailed content of How vue.js controls each item in the list. For more information, please follow other related articles on the PHP Chinese website!