Vue.js 实现tab切换并变色操作讲解
作者:Q_xyue 时间:2023-07-02 16:51:40
在实现这个功能时借鉴的原博主的方法没有实现切换变色,琢磨了好久终于知道了怎么切换变色(小菜鸟的咆哮)!!!记录下来以供参考,以下是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;
}
以下是效果图:
点击中间件详情:
效果图:
点击部署架构:
来源:https://blog.csdn.net/Q_xyue/article/details/120228875
标签:vue.js,tab
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
python买卖股票的最佳时机(基于贪心/蛮力算法)
2022-12-26 14:44:24
![](https://img.aspxhome.com/file/2023/1/76891_0s.png)
Python办公自动化PPT批量转换操作
2023-11-07 16:54:20
![](https://img.aspxhome.com/file/2023/7/90387_0s.jpg)
大容量csv快速内导入sqlserver的解决方法(推荐)
2024-01-13 00:44:12
js实现向右横向滑出的二级菜单效果
2024-04-17 10:34:44
![](https://img.aspxhome.com/file/2023/9/136229_0s.jpg)
JS 逻辑判断不要只知道用 if-else 和 switch条件判断(小技巧)
2024-04-17 09:52:06
win7+Python3.5下scrapy的安装方法
2023-06-05 02:02:41
![](https://img.aspxhome.com/file/2023/9/133429_0s.png)
Python迭代器与生成器用法实例分析
2023-08-23 05:52:38
python的scipy.stats模块中正态分布常用函数总结
2021-06-26 16:03:04
以数据库字段分组显示数据的sql语句(详细介绍)
2024-01-29 07:39:49
详解MySQL数据库安全配置
2010-01-26 15:19:00
解析ASP与SQL server互操作的时间处理
2008-05-17 11:57:00
Python Flask RESTful使用demo演示
2023-08-04 07:02:23
![](https://img.aspxhome.com/file/2023/9/124989_0s.png)
在pandas中遍历DataFrame行的实现方法
2022-02-16 13:13:26
![](https://img.aspxhome.com/file/2023/7/75867_0s.jpg)
几个小技巧帮你实现Golang永久阻塞
2024-02-14 10:37:29
Python Django ORM与模型详解
2022-01-03 10:40:53
![](https://img.aspxhome.com/file/2023/6/91876_0s.png)
MySQL数据库定时任务举例讲解
2024-01-23 22:31:44
Python 爬虫之超链接 url中含有中文出错及解决办法
2023-07-27 00:25:06
数据库性能优化三:程序操作优化提升性能
2024-01-14 08:58:49
python实现雨滴下落到地面效果
2021-10-04 03:58:32
![](https://img.aspxhome.com/file/2023/4/101184_0s.gif)
Python计算信息熵实例
2022-08-17 16:13:39
![](https://img.aspxhome.com/file/2023/0/103300_0s.jpg)