H5W3
当前位置:H5W3 > 其他技术问题 > 正文

vue中less :last-child不起作用

如图,想让最后一条线消失。last-child不起作用
我查了原因是 line 不在同一个父元素里。 请问有没有更好的解决方法
clipboard.png

.line {
    height: 30px;
    border-left: 1px dashed #ccc;
    margin-left: 3px;
    :last-child {
      display: none;
    }
}
<template>
  <div class='panel'>
    <div class='title'>
      <span>时间轴</span>
    </div>
    <div class='timeline'>
      <div v-for='item in info' :key='item.processCn'>
        <div class='stage'>
          <div class='row'>
            <span class='dot'></span>
            <span>{{item.processCn}}</span>
          </div>
          <div class='time'>{{item.time}}</div>
        </div>
        <div class='line'></div>
      </div>
    </div>
  </div>
</template>

回答:

<div class='line' v-if="index!=info.length"></div>

用v-if判断下是不是最后一个元素不就好了。

回答:

line {
    height: 30px;
    border-left: 1px dashed #ccc;
    margin-left: 3px;
    &:last-child {
      display: none;
    }
}

本文地址:H5W3 » vue中less :last-child不起作用

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址