This writing can not be dynamically switched, how to change the display and hiding of small stars?

<el-tabs v-model="activeName" :stretch=true @tab-click="handleClick">
        <el-tab-pane name="first">
          <span slot="label">
            <i v-show="activeName==="first"" class="far fa-star xssc" aria-hidden="true"></i>
          </span>
          
        </el-tab-pane>
        <el-tab-pane name="second">
          <span slot="label">
            <i v-show="activeName==="second"" class="far fa-star xssc" aria-hidden="true"></i>
          </span>
          
        </el-tab-pane>
        <el-tab-pane name="third">
          <span slot="label">
            <i v-show="activeName==="third"" class="far fa-star xssc" aria-hidden="true"></i>
          </span>
          
        </el-tab-pane>
      </el-tabs>

May.03,2021

add transparent colors to small stars dynamically

< div: class= "{'class-a': isA,' class-b': isB}" > Demo4 < / div >
.class-a {color}
.class-b {color is transparent}
isA: switch to tab
isB: does not switch to tab

Menu