Vue.js even numbered rows formatting

Question

Using vue.js I am trying to to make odd rows with a class of light-orange and even rows with a class or green

In my template, I have

<div class="col-md-3" v-for="m in menu">\
    <div class="menu-item light-orange">{{#if Math.abs($index % 2)}}\
                            <a href="#feature-modal" data-toggle="modal">\
                                <i class="fa {{m.icon}}"></i>\
                                <p>Feature</p>\
                            </a>\
                        </div>\
                        </div>\

In addition to the Math.abs there, I tried a few other math related functions... all with the same result... ie. Always showing the text in the if statement

Answer 1

Vue.js does not support mustache template syntax. That is why the if statement is showed up in the page.

Instead, Vue has a special class binding v-bind:class or in short :class that can be used to set the element's classes by passing expressions:

<div :class="{'light-orange': $index % 2 === 0, 'green': $index % 2 !== 0 }">
  ...
</div>

If the expression is truthy, the class name will be added, otherwise it will not.

---

Regarding the if statement, there is also a v-if directive which handles the presence of an element in the DOM.

It takes an expression and will add the element into the DOM if the expression evaluates to a truthy value.

In some cases we might need to have an else statement, and that is what v-else directive is for.

It's worth noting that the element having a v-else directive must follow the v-if element immediately within the template.

Answer 2

You can also use css.

.menu-item:nth-child(odd) {
  background-color: red;
} 

.menu-item:nth-child(even) {
  background-color: green;
}