Vue.js 实现tab切换并变色操作讲解

发布时间:2022-04-16 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了Vue.js 实现tab切换并变色操作讲解脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

在实现这个功能时借鉴的原博主的方法没有实现切换变色,琢磨了好久终于知道了怎么切换变色(小菜鸟的咆哮)!!!记录下来以供参考,以下是vue的完整tab页切换并变色的代码框架。

&#8203;<template>
<div >
     //tab页切换按钮部分
      <ul >
        <li v-for="(ITem,index) in navList" :class = "{active:!(index- 
            menuIndex)}" @click = 'menuShow(index)'>
          <a href="#" rel="external nofollow" >{{item}}</a>
        </li>
      </ul>
 
   //内容主体部分
   <div v-show = 'menuIndex == 0'>内容一 <!--此处可以换成子组件--></div>
   <div v-show = 'menuIndex == 1'>内容二 <!--此处可以换成子组件--></div>
</div>
</template>
 
<script tyPE="text/javascript">
export default {
data(){
      return {
         menuIndex:0,
        navList:['中间件详情','部署架构'],
      }
            }
   methods: {
      menuShow (index) {
        this.menuIndex = index
        console.LOG(this.menuIndex)
      }
}
</script>
//样式
<style scoped>
//点击切换颜色,我设置的为蓝色
  .active{
    background-color: rgba(13, 175, 255, 0.33);
    }
<style>

切换颜色就是这个

.active{
//背景色
  background-color: rgba(13, 175, 255, 0.33);
//字体色
color:red;
  }

以下是效果图:

点击中间件详情:

效果图:

点击部署架构:

到此这篇关于Vue.js 实现tab切换并变色操作讲解文章就介绍到这了,更多相关Vue.js 实现tab切换并变色内容请搜索脚本宝典以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本宝典!

脚本宝典总结

以上是脚本宝典为你收集整理的Vue.js 实现tab切换并变色操作讲解全部内容,希望文章能够帮你解决Vue.js 实现tab切换并变色操作讲解所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签:vue.js