Vue for循环展示不同的css样式

原创于 2020-10-30 09:17:59 发布 · 2.6k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#vue #css

本文介绍如何使用 Vue.js 创作一个任务管理组件，通过不同颜色标识高优先级、中等和低优先级任务，实现视觉区分和动态更新。通过CSS样式调整，展示紧急、普通和闲置任务的状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<div v-for="(item,index) in listObj" :key="index">
	<div style="height:60px;float:left" v-bind:class="{urgent:item.status==1,moderate:item.status==2,idle:item.status==3}">
	</div>

.urgent{
	width:65%;
	float:left;
	border-left:2px solid rgba(251,49,47,1);
	border-top:1px solid gray
}
.moderate{
	width:65%;
	float:left;
	border-left:2px solid rgba(255,159,39,1);
	border-top:1px solid gray
}
.idle{
	width:65%;
	float:left;
	border-left:2px solid rgba(7,181,0,1);
	border-top:1px solid gray
}

效果图：
在这里插入图片描述