苏飞论坛

标题: vue.js奇偶行处理方式 [打印本页]
作者: 站长苏飞    时间: 2018-12-21 15:44
标题: 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>


效果
(, 下载次数: 62)