CSSのコンテンツの切り替え

コンテンツの切り替えのために、フォントの数に応じて適応させます

<template>
    <div class="switch_list switch_bkgrd" style="padding:96px 0 0 167px;">
      <ul class="tab-tilte__box">
        <li @click="cur1=0" :class="{active:cur1==0}"><p>First section</p></li>
        <li @click="cur1=1" :class="{active:cur1==1}"><p>Second section</p></li>
        <li @click="cur1=2" :class="{active:cur1==2}"><p>Third section</p></li>
        <li @click="cur1=3" :class="{active:cur1==3}"><p>Forth section</p></li>
      </ul>
    </div>
</template>

<script>
export default {
  data(){
    return {
      cur1:0,
    }
  }
}
</script>

<style lang="scss">
.tab-tilte__box{
  display: flex;
  li{
  height:28px;
  margin-right:48px;
  font-size: 14px;
  color: #21252E;
  cursor: pointer;
    p{
        height:28px;
        border-bottom:3px solid transparent;
    }
  }
  .active{
    color: #00B259;
    p{
        border-bottom:3px solid #00B259;
    }
  }
} 
</style>