title: How to custom v-for using v-if for make a class in div tag
body: <p>How to correctly way use v-if when I using v-for inside? </p>
  
  <p>Actually I want to add a condition when the index is <code>0</code> or <code>first data</code> is displayed I want to add <code>active class</code></p>
  
  <pre><code>&lt;div class="item active" v-for="(item, key, index) in slideItem" :key="item._id"&gt;
      &lt;img alt="900x500" src="http://lorempixel.com/960/720/"&gt;
      &lt;div class="carousel-caption"&gt;
          &lt;h3&gt;{{ item.title }}&lt;/h3&gt;
          &lt;p&gt;{{ item.body }}&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and show this when the next data :</p>
  
  <pre><code>&lt;div class="item" v-for="(item, key, index) in slideItem" :key="item._id"&gt;
          &lt;img alt="900x500" src="http://lorempixel.com/960/720/"&gt;
          &lt;div class="carousel-caption"&gt;
              &lt;h3&gt;{{ item.title }}&lt;/h3&gt;
              &lt;p&gt;{{ item.body }}&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>You can see the two examples I gave, how I combine the two loops into one by distinguishing the first index (<code>item active)</code> condition and so on using <code>v-if</code></p>