技術標籤：css3vueDemocssvuehtml

上程式碼：
html:

<div class="btn-view">
      <button
        type="text"
        :class="index === i ? 'btn-active' : ''"
        v-for="(item, i) in btns"
        :key="i"
        @click="tabsClick(item, i)"
      >
        {{ item }}
      </button>
    </div>
 

js：

data(){
 return {
 	index:0
 }
},
methods:{
// tabs切換
    tabsClick(data, i) {
      this.index = i;
    },
 }

scss樣式程式碼：

 .btn-view {
        display: flex;
        width: 100%;
        justify-content: space-between;
        border-bottom: 1px solid #ECEBEF;
        padding: 10px 30px 0px;

        button {
            background: #fff;
            font-size: 32px;
            font-family: PingFangSC;
            color: #333333;
            line-height: 28px;
            cursor: pointer;

            &:after {
                content: '';
                width: auto;
                width: 50px;
                height: 5px;
                background: transparent;
                border-radius: 4px;
                display: block;
                margin: 0 auto;
                margin-top: 30px;

            }
        }

        .btn-active {

            font-size: 32px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #4D7CFE;
            line-height: 28px;


            &:after {
                content: '';
                width: auto;
                width: 50px;
                height: 5px;
                background: #4D7CFE;
                border-radius: 4px;
                display: block;
                margin: 0 auto;
                margin-top: 30px;

            }
        }
    }
 

中心程式碼：
.btn-active:after {
content: ‘’;
width: auto;
width: 50px;
height: 5px;
background: #4D7CFE;
border-radius: 4px;
display: block;
margin: 0 auto;
margin-top: 30px;
}