Vue.js 实现tab切换并变色操作讲解
作者：Q_xyue 发布时间：2023-07-02 16:51:40
标签：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；
}
以下是效果图：
点击中间件详情：
效果图：
点击部署架构：
来源：https://blog.csdn.net/Q_xyue/article/details/120228875
0
投稿猜你喜欢
- 太多的小伙伴正在学习Python，就说自己以后要做全栈开发，大家知道这是做什么的吗？我们现在所知道的知识点，哪些是以后你要从事这个全栈所需要
集中式工作流(不常用)集中式工作流像SVN一样，以中央仓库作为项目所有修改的单点实体。所有修改都提交到 Master分支上。这种方式与 SV- 本文以抢购、秒杀为例。介绍如何在高并发状况下确保数据正确。 在高并发请求下容易参数两个问题 1.数据出错，导致产品超卖。 2.频繁操作数据库
- 一、python这么多版本如何选择？作为初学者，只需知道 Python 分 Python 2.x 和 Python 3.x 两大版本就可以了
- Python 语言里有许多（而且是越来越多）的高级特性，是 Python 发烧友们非常喜欢的。在这些人的眼里，能够写出那些一般开发者看不懂的
- 如何使用GPU而不是CPU首先查看设备from tensorflow.python.client import device_libprin
- 1.不同字符与获取字符串长度获取字符串长度，是字符串操作的重要方法。理论来说，获取字符串长度，只要从头到尾查找一遍就可以了。但遗憾的是，不同
- 1，GallerificGalleriffic 是使用 Mike Alsup 的 jQuery Cycle plugin 创建的图片展示效果
- 问题：mybatis返回的null类型数据消失，导致前端展示出错思路：如果查询出的结果是空值，应当转换成空字符串。当然在前端也能进行判断，但
- 概述Alwayson相对于数据库镜像最大的优势就是可读副本，带来可读副本的同时还添加了一个新的功能就是配置只读路由实现读写分离；当然这里的读
- 本文介绍使用aspjpeg组件实现图片的半透明描边的效果，描边效果演示：参数说明'big 原图路径(相对)'small 生成
- 存储过程中的TOP后跟一个变量会如何？ Create proc getWorkPlan2 (@intCounter int ,@lngUse
- 前言在python中，print是重要的输出语句，让我们更方便的知道程序的运行状况，但是这样还不够，我们也可以用print来给周围的小伙伴秀
- 在上一篇博客中，已经将环境搭建好了。现在，我们利用搭建的环境来运行一条测试脚本，脚本中启动一个计算器的应用，并实现加法的运算。创建模拟器在运
- 解决大于5.7版本mysql的分组报错Expression #1 of SELECT list is not in GROUP BY clause and contains nonaggregated原因:MySQL 5.7.5和up实现了对功能依赖的检测。如果启用了only_full_group_by SQL模式(在默认情况下是这样)，
- part 1最近在学习go自带的rpc，看完了一遍想着自己实现一个codec，也就是自定义消息的序列化和反序列化。消息的序列化和反序列化涉及
- 在Git简介一文中已经对Git进行了简单的介绍，但是理论知识过于枯燥，加上本人专业知识不够扎实，使得初学者在Git的使用上还是会有很大的困难
- 本文全部操作均在windows环境下安装 PythonPython是一种跨平台的计算机程序设计语言，它可以运行在Windows、Mac和各种
- yield的功能类似于return，但是不同之处在于它返回的是生成器。生成器生成器是通过一个或多个yield表达式构成的函数，每一个生成器都
- 01 并行复制的概念 在MySQL的主从复制架构中，主库上经常会并发的执行很多SQL，只要这些SQL没有产生锁等待，
