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中元素的存在。

它需要一个表达式，如果表达式求值为真值，则会将该元素添加到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甚至编号行格式化

2 个答案: