如何去除最后一个边框线样式

Question

如何去除最后一个边框线样式

<template>
  <div style="width: 320px">
    <ul>
      <li v-for="item in activities" :key="item.index">
        <div class="timeline">
          <div class="time">{{ item.timestamp }}</div>
          <div class="line"></div>
          <div class="content">{{ item.content }}</div>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
import { reactive } from "vue";

export default {
  setup() {
    const activities = reactive([
      {
        content: "xx社区任职社区工作人员",
        timestamp: "2018.05",
      },
      {
        content: "xx社区任职社区工作人员",
        timestamp: "2016.06",
      },
      {
        content: "离职",
        timestamp: "2020.12",
      },
      {
        content: "xx社区任职社区工作人员",
        timestamp: "2022.11",
      },
    ]);

    return { activities };
  },
};
</script>

<style>
ul {
  list-style: none;
}
.timeline {
  width: 320px;
  display: flex;
  justify-content: flex-start;

}
.content{
  margin-left: 80px;
}
.line {
  height: 70px;
  border-left: 1px solid #bfbfbf;
  margin-top: 25px;
  margin-bottom: 5px;
  position: relative;
  left: -32px;
}
.line:last-of-type {
    border: none;
    height: 0;
}
</style>

Answer 1

你这个 要从 组件封装 就考虑到 。 比如 你这个 。line控制 这个线 .我看有个div 你只需要把这个隐藏了就行（判断 index 为 最后一个或者 ，给 数据里加个属性 ）。

<template>
    <div style="width: 320px">
      <ul>
        <li v-for="(item,index) in activities" :key="index">
          <div class="timeline">
            <div class="time">{{ item.timestamp }}</div>
            <div class="line" v-if="index==activities.length"></div>
            <div class="content">{{ item.content }}</div>
          </div>
        </li>
      </ul>
    </div>
  </template>