Vue.js 偶数行格式化

Question

使用 vue.js 我试图用 class 浅橙色制作奇数行，用 class 或绿色

制作偶数行

在我的模板中，我有

<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 不支持 mustache 模板语法。这就是 if 语句出现在页面中的原因。

相反，Vue 有一个特殊的 class 绑定 v-bind:class 或简称 :class，可用于通过传递表达式来设置元素的 classes：

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

如果表达式为真，class名称将被添加，否则不会。

关于 if 语句，还有一个 v-if 指令处理 DOM.

中元素的存在

它接受一个表达式，如果表达式的计算结果为真值，它将把元素添加到 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;
}

Vue.js 偶数行格式化

Vue.js even numbered rows formatting

vue.js