纯净、安全、绿色的下载网站

首页|软件分类|下载排行|最新软件|IT学院

当前位置:首页IT学院IT技术

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

Q_xyue   2021-09-14 我要评论
想了解Vue.js 实现tab切换并变色操作讲解的相关内容吗Q_xyue在本文为您仔细讲解Vue.js 实现tab切换并变色的相关知识和一些Code实例欢迎阅读和指正我们先划重点:vue.js,tab页切换,vue.js,tab页切换变色下面大家一起来学习吧

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

​<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;
  }

以下是效果图:

点击中间件详情:

效果图:

点击部署架构:


相关文章

猜您喜欢

  • SpringBoot多表查询 SpringBoot进行多表查询功能的实现

    想了解SpringBoot进行多表查询功能的实现的相关内容吗vid在本文为您仔细讲解SpringBoot多表查询的相关知识和一些Code实例欢迎阅读和指正我们先划重点:SpringBoot多表查询,SpringBoot查询下面大家一起来学习吧..
  • Vue.js之$emit用法 Vue.js之$emit用法案例详解

    想了解Vue.js之$emit用法案例详解的相关内容吗榴莲不好吃在本文为您仔细讲解Vue.js之$emit用法的相关知识和一些Code实例欢迎阅读和指正我们先划重点:Vue.js,$emit,Vue.js,$emit用法下面大家一起来学习吧..

网友评论

Copyright 2020 www.sopisoft.net 【绿软下载站】 版权所有 软件发布

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 点此查看联系方式