vue实现tab切换外加样式切换方法
下面我就为大家分享一篇vue实现tab切换外加样式切换方法，具有很好的参考价值，希望对大家有所帮助。
实例如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none
}
#app {
width: 504px;
height: 300px;
margin: 100px auto;
border: 1px solid #000;
}
ul {
overflow: hidden;
}
li {
width: 100px;
height: 50px;
float: left;
text-align: center;
line-height: 50px;
border-bottom: 1px solid #000;
border-right: 1px solid #000;
}
li:nth-child(5) {
border-right: none;
}
.cur {
height: 51px;
background: blue;
border-bottom: none;
}
</style>
</head>
<body>
<p id="app">
<ul>
<li v-for="(num,index) in nums" :class="{cur:iscur==index}" @click="iscur = index,tab('text'+(index+1))">
{{num.t}}
</li>
</ul>
<p class="box">
<component :is='currentView' keep-alive></component>
</p>
</p>
<script src="vue.js"></script>
<script>
const text1 = Vue.component('text1', {template: `<p><h1>Text111111111111</h1></p>`});
const text2 = Vue.component('text2', {template: `<p><h1>Text222222222222</h1></p>`});
const text3 = Vue.component('text3', {template: `<p><h1>Text333333333333</h1></p>`});
const text4 = Vue.component('text4', {template: `<p><h1>Text444444444444</h1></p>`});
const text5 = Vue.component('text5', {template: `<p><h1>Text555555555555</h1></p>`});
var vm = new Vue({
el: "#app",
data: {
currentView: text1,
nums: [{t: "text1"}, {t: "text2"}, {t: "text3"}, {t: "text4"}, {t: "text5"}],
iscur: 0
},
methods: {
tab(tabText){
this.currentView = tabText;
}
}
})
</script>
</body>
</html>上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
vue中Npm run build 根据环境传递参数方法来打包不同域名
Vue 将后台传过来的带html字段的字符串转换为 HTML
以上是vue实现tab切换外加样式切换方法的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
热门话题
macOS：如何更改桌面小部件的颜色
Oct 07, 2023 am 08:17 AM
在macOSSonoma中，小部件不必隐藏在屏幕外，也不必像在以前版本的Apple的macOS中那样在通知中心面板中被遗忘。相反，它们可以直接放置在Mac的桌面上–它们也是交互式的。不使用时，macOS桌面小部件会采用单色样式淡入背景，从而减少干扰，并允许您专注于活动应用程序或窗口中手头的任务。但是，当您单击桌面时，它们将恢复为全彩色。如果您更喜欢单调的外观，并且希望在桌面上保留这一方面的统一性，那么有一种方法可以使其永久化。以下步骤演示了它是如何完成的。打开“系统设置”应用
小米14Ultra如何切换4g和5g？
Feb 23, 2024 am 11:49 AM
小米14Ultra是今年小米中非常火热的机型之一，小米14Ultra不仅仅升级了处理器以及各种配置，而且还为用户们带来了很多新的功能应用，从小米14Ultra销量就可以看出来手机的火爆程度，不过有一些常用的功能可能你还没了解。那么小米14Ultra如何切换4g和5g呢？下面小编就为大家介绍一下具体的内容吧！小米14Ultra怎么切换4g和5g？1、打开手机的设置菜单。2、设置菜单中查找并选择“网络”、“移动网络”的选项。3、移动网络设置中，会看到“首选网络类型”选项。4、点击或选择该选项，会看到
win11家庭版切换专业版操作教程_win11家庭版切换专业版操作教程
Mar 20, 2024 pm 01:58 PM
Win11家庭版怎么转换成Win11专业版?在Win11系统中，分为了家庭版、专业版、企业版等，而大部分Win11笔记本都是预装Win11家庭版系统。而今天小编就给大家带来win11家庭版切换专业版操作步骤!1、首先在win11桌面此电脑上右键属性。2、点击更改产品密钥或升级windows。3、然后进入后点击更改产品密钥。4、再输入激活密钥：8G7XN-V7YWC-W8RPC-V73KB-YWRDB，选择下一步。5、接着就会提示成功，这样就可以将win11家庭版升级win11专业版了。
Win10系统如何实现双系统切换
Jan 03, 2024 pm 05:41 PM
很多朋友刚接触win系统的时候可能用不习惯，电脑中存着双系统，这个时候其实是可以双系统切换的，下面就一起来看看两个系统切换的详细步骤吧。win10系统如何两个系统切换方法一、快捷键切换1、按下“win”+“R”键打开运行2、在运行框中输入“msconfig”点击“确定”3、在打开的“系统配置”界面中选择自己需要的系统点击“设为默认值”，完成后“重新启动”即可完成切换方法二、开机时选择切换1、拥有双系统时开机会出现一个选择操作界面，可以使用键盘“上下”键进行选择系统
切换苹果电脑双系统启动方式
Feb 19, 2024 pm 06:50 PM
苹果双系统开机怎么切换苹果电脑作为一款功能强大的设备，除了搭载自家的macOS操作系统外，也可以选择安装其他操作系统，比如Windows，从而实现双系统的切换。那么在开机时，我们如何切换这两个系统呢？本文就来为大家介绍一下在苹果电脑上如何实现双系统的切换。首先，在安装双系统之前，我们需要确认自己的苹果电脑是否支持双系统切换。一般来说，苹果电脑都是基于
excel切换工作簿快捷键的使用方法
Mar 20, 2024 pm 01:50 PM
在excel软件的应用里，我们已经习惯使用快捷键，让有些操作变得更简单和快捷，excel的多个表格之间有时候会有相关的数据，我们在查看时，要不停的切换工作簿，如果有更快捷的切换方法，就会省下很多切换浪费的时间，对工作效率的提高有很大的帮助，什么办法可以完成快速的切换呢，针对这个问题，小编今天要讲的内容是：excel切换工作簿快捷键的使用方法。1、首先在打开的excel表格的下方可以看到有多个工作簿，需要快捷切换不同的工作簿，如下图所示。 2、然后按下键盘上的Ctrl键不动，如果需要向右选择工作
WordPress网页错位现象解决攻略
Mar 05, 2024 pm 01:12 PM
WordPress网页错位现象解决攻略在WordPress网站开发中，有时候我们会遇到网页元素错位的情况，这可能是由于不同设备上的屏幕尺寸、浏览器兼容性或者CSS样式设置不当所致。要解决这种错位现象，我们需要仔细分析问题、查找可能的原因，并逐步进行调试和修复。本文将分享一些常见的WordPress网页错位问题以及相应的解决攻略，同时提供具体的代码示例，帮助开
无法使用win11的alt+tab切换界面，出现的原因是什么？
Jan 02, 2024 am 08:35 AM
win11支持用户使用alt+tab快捷键的方式来调出桌面切换工具，但是最近有朋友遇到了win11alt+tab切换不了界面的问题，不知道是什么原因也不知道怎么解决。win11alt+tab切换不了界面什么原因：答：因为快捷键功能被禁用了，下面是解决方法：1、首先我们按下键盘“win+r”打开运行。2、接着输入“regedit”并回车打开组策略。3、然后进入“HKEY_CURRENT_USER\SOFTWARE\Microsoft\Windows\CurrentVersion\Explorer”
