CODEWITHSUNDEEP
javascriptvue.js
Andrelec1
Andrelec1

Reputation: 382

VueJS v-for class alternation

i can't found other way to recreate something like the tripped for table in bootstrap ...

so this is the best way ? there is a native alternative for doing %2 ?

new Vue({
  el: '#app',
  props: {
    data:{
      type: Array,
      default: function(){ return ['a', 'b', 'c', 'd']; },
    }
  }
})
.stripped {
  color: red;
}
<script src="https://unpkg.com/vue"></script>
<div id="app">
  <p v-for='(datum, i) in data' :class='{stripped: i%2}' >{{ datum }}</p>
</div>

Upvotes: 0

Views: 601

Answers (1)

Jono20201
Jono20201

Reputation: 3205

If your intent on doing this using Vue then that seems like a reasonably clean solution to me.

Alternatively you could look at using :nth-child(even) and :nth-child(odd) CSS selectors?

Upvotes: 2

Related Questions