Vue.js甚至编号行格式化

Question

使用vue.js我试图用一类浅橙色甚至是带有类或绿色的行来制作奇数行

在我的模板中,我有

<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>\

除了那里的Math.abs之外,我还尝试了一些其他与数学相关的函数......都具有相同的结果...即.始终在if语句中显示文本

Answer 1

Vue.js不支持胡子模板语法.这就是该if声明出现在页面中的原因.

相反,Vue有一个特殊的类绑定,v-bind:class或者简而言之:class,可以通过传递表达式来设置元素的类:

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

如果表达式是真实的,则会添加类名,否则不会.

关于if语句,还有一个v-if指令来处理DOM中元素的存在.

它需要一个表达式,如果表达式求值为truthy值,则会将该元素添加到DOM中.

在某些情况下,我们可能需要一个else声明,这就是v-else指令的用途.

值得注意的是,具有v-else指令的v-if元素必须紧跟模板中的元素.

Answer 2

您也可以使用CSS。

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

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