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

最新推荐文章于 2024-08-26 11:29:33 发布

aa331916334

最新推荐文章于 2024-08-26 11:29:33 发布

阅读量332

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/smdb/p/7967120.html

版权

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