H5W3
当前位置:H5W3 > JavaScript > Vue相关 > 正文

【Vue】这样写无法动态切换,小星星的显示和隐藏,应该怎么改?

<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>

【Vue】这样写无法动态切换,小星星的显示和隐藏,应该怎么改?

回答

给小星星动态添加透明颜色既可以了

<div :class=”{ ‘class-a’: isA, ‘class-b’: isB}”>Demo4</div>
.class-a{有颜色}
.class-b{颜色为透明}
isA: 切换到tab
isB:没有切换到tab

本文地址:H5W3 » 【Vue】这样写无法动态切换,小星星的显示和隐藏,应该怎么改?

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址