如何用vue控制样式实现相同的结构样式

时间:2024-08-28 20:06:08
<div class="index-board-list">
<div
class="index-board-item"
v-for="(item, index) in boardList"
:class="[{'line-last' : index % 2 !== 0}, 'index-board-' + item.id]">
</div>
</div>
<style>
.index-board-list {
overflow: hidden;
}
.index-board-item {
float: left;
width: 400px;
background: #fff;
box-shadow: 0 0 1px #ddd;
padding: 20px;
margin-right: 20px;
margin-bottom: 20px;
}
//如果不加.line-last就不会让元素在一排 .line-last { margin-right: 0;
}
//通过
'index-board-' + item.id来控制图片
.index-board-car .index-board-item-inner{
background: url(../assets/images/1.png) no-repeat;
}
.index-board-loud .index-board-item-inner{
background: url(../assets/images/2.png) no-repeat;
}
.index-board-earth .index-board-item-inner{
background: url(../assets/images/3.png) no-repeat;
}
.index-board-hill .index-board-item-inner{
background: url(../assets/images/4.png) no-repeat;
}
 
</style>