Vue自定义隔行变色（一个标签使用两个class样式）

半度纳

已于 2023-02-28 09:13:19 修改

阅读量475

点赞数

分类专栏： Vue 文章标签： vue.js javascript 前端

于 2023-02-25 10:43:08 首次发布

本文链接：https://blog.csdn.net/Five297/article/details/129212759

版权

Vue 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

该文章展示了如何在Vue.js应用中，通过条件类绑定(:class)实现el-row组件的隔行变色效果。具体做法是利用index%2的运算判断行的奇偶性，分别应用不同的class，如ossColor和openColor，从而达到交替显示颜色的目的。

摘要由CSDN通过智能技术生成

自定义隔行变色样式（适用于 el-row中），通过判断是奇数偶数来使用不同的class样式；
:class="{样式名1: index%2==0, 样式名2:index%2!=0}"
实现效果：

演示代码：

<el-row :class="{ossColor: index%2==0, openColor:index%2!=0}" v-for="(item,index) in this.alarmList">
    <el-col :span="5">
        <p style="text-align: center">{{index+1}}</p>
	</el-col>
	<el-col :span="12">
		<p style="text-align: left;margin-left: 35px;">{{item.gasName}}</p>
	</el-col>
	<el-col :span="6">
		<p style="text-align: center;margin-left: 20px;">{{item.mount}}</p>
	</el-col>
</el-row>

<style>
    .ossColor {
		color: #000000;
	}

	.openColor {
		color: #000000;
		background-color: #f6f6f6;
	}
</style>