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.