Vue.js even numbered rows formatting

You can also use css.

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

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

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.