vue.js奇偶行处理方式

站长苏飞

我们先来定义一下偶数行时的样式

[CSS] 纯文本查看 复制代码

 <style>
.tractive
{
background-color: rgb(240, 248, 255);
}
</style>

循环的方式也需要修改一下，要增加一个index的参数

[HTML] 纯文本查看 复制代码

 <tr v-for="(info,index) in userlogs" :class="{'tractive':index%2!=0}">
<td align="center">
{{ info.User_name}}
</td>
<td align="center">
{{ info.StrUser_createdate}}
</td>
<td align="center">
{{ info.User_ip}}
</td>
<td align="center">
{{ info.User_useragent}}
</td>
</tr>

效果

Amy

强烈支持楼主ing……

竹林风

我只是路过打酱油的。

liu

强烈支持楼主ing……

惜

强烈支持楼主ing……