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

<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>