Vue实现选项卡demo

如图所示：

<template>
  <div class="news_wrap">
    <ul class="news_title">
      <li
        v-for="(item, index) in items"
        :key="index"
        :class="{ activeShow: activeIndex === index }"
        @click="currentHandel(index)"
      >
        <svg class="icon" aria-hidden="true">
          <use
            v-if="activeIndex === index"
            :xlink:href="'#icon-' + item.activeIcon"
          ></use>
          <use v-else :xlink:href="'#icon-' + item.icon"></use>
        </svg>
        <span>{{ item.title }}</span>
      </li>
    </ul>
    <ul class="news_content">
      <li
        v-for="(item, index) in contents"
        :key="index"
        v-show="activeIndex === index"
      >
        {{ item.content }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: 0,
      items: [
        { title: "新闻", icon: "xinwen", activeIcon: "xinwen11" },
        { title: "公告", icon: "gonggaopai", activeIcon: "gonggaopai1" },
        { title: "通知", icon: "tongzhi2", activeIcon: "tongzhi11" },
      ],
      contents: [{ content: "1111" }, { content: "2222" }, { content: "3333" }],
    };
  },
  created() {},
  mounted() {},
  methods: {
    currentHandel(index) {
      this.activeIndex = index;
    },
  },
};
</script>

<style scoped lang="scss">
.news_wrap {
  display: flex;
  padding-top: 12px;
  .news_title {
    width: 156px;
    margin-right: 16px;
    li {
      display: flex;
      align-items: center;
      padding: 10px 0px;
      padding-left: 24px;
      cursor: pointer;
      .icon {
        width: 16px;
        height: 16px;
      }
      span {
        font-size: 14px;
        font-family: PingFangSC, PingFangSC-Regular;
        font-weight: 400;
        color: #646a73;
        line-height: 20px;
        letter-spacing: 1px;
        margin-left: 15px;
      }
      &.activeShow {
        background: #edf3ff;
        span {
          color: #4273f6;
        }
      }
    }
  }
  .news_content {
    flex: auto;
  }
}
</style>