在工作中遇到如图所示的一个需求

效果图

分析之后明显可以看出,右边的label和数字都可以通过v-for中动态设置内容来实现,但是图片的变换就没有办法直接实现,最开始尝试的是设置class,但是Vue不支持通过v-for循环动态设置class,除非在class中一个一个去设置
background-position,但是这样的话代码复用率就有点低,考虑之后使用了scss中的循环+子类选择器来做

html:

  <section class="content-info">
        <div v-for="(item,i) in content_list" :key="i" class="content-info-item">
          <p>{{item.title}}</p>
          <strong>
            355.2
          </strong>
        </div>
  </section>

scss:

 .content-info {
            display: flex;
            justify-content: space-between;
            .content-info-item {
                background-color: #fff;
                position: relative;
                padding: 20px 20px 20px 80px;
                flex: 1;
                > p {
                    padding-bottom: 10px;
                }
                > strong {
                    color: $base-color;
                    font-size: 1.5em;
                }

                &::before {
                    content: "";
                    display: block;
                    width: 60px;
                    margin: 20px 0;
                    height: 60px;
                    background-color: #f00;
                    position: absolute;
                    left: 10px;
                    top: 0;
                    background: url("../../assets/images/titlenav.png")
                        no-repeat 0 0;
                    background-size: cover;
                }
                //实现循环的主要逻辑
                @for $i from 1 to 10 {
                    &:nth-child(#{$i})::before {
                        background-position-y: #{(1-$i) * 65}px;
                    }
                }
            }

            .content-info-item:nth-child(n + 2) {
                margin-left: 1%;
            }
        }
        .content-item:nth-child(n + 2) {
            margin-left: 10px;
        }

几个知识点

• 同级选择器,或者叫父类选择器&,效果是选到上一层
  &::before就等同于.content-info-item::before
• 直接子类选择器>,注意>之后必须跟一个空格
• for循环 @for $i from a to b,获取i的值用的是#{$i}