title: Vue alternate classes in v-for
body: <p>I have an array (history) that is being pushed two items every time a button is pressed. Those two items will need to have different css styles when printed.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;ul class="info"&gt;
    &lt;li :class="{ 'style-one' : toggle, 'style-two' : toggle }" v-for="item in history"&gt;{{item}}&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p><strong>JS (Vue)</strong></p>
  
  <pre><code>methods: {
    attack: function() {
    this.history.unshift(this.playerDamaged);
    this.history.unshift(this.monsterDamaged);
  }
  </code></pre>
  
  <p>The problem with this is there is no way to change the truthiness of <code>toggle</code> during the loop. Is there a better way to approach this?</p>