Below I will share with you an article on how to implement tab switching and style switching in Vue. It has a good reference value and I hope it will be helpful to everyone.
The example is as follows:
<!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 id="Text">Text111111111111</h1></p>`});
const text2 = Vue.component('text2', {template: `<p><h1 id="Text">Text222222222222</h1></p>`});
const text3 = Vue.component('text3', {template: `<p><h1 id="Text">Text333333333333</h1></p>`});
const text4 = Vue.component('text4', {template: `<p><h1 id="Text">Text444444444444</h1></p>`});
const text5 = Vue.component('text5', {template: `<p><h1 id="Text">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>The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.
Related articles:
Use js to realize front and back transfer Json sample code
Vue converts the string with html field passed from the background into HTML
The above is the detailed content of vue implements tab switching plus style switching method. For more information, please follow other related articles on the PHP Chinese website!
macOS：如何更改桌面小部件的颜色Oct 07, 2023 am 08:17 AM在macOSSonoma中，小部件不必隐藏在屏幕外，也不必像在以前版本的Apple的macOS中那样在通知中心面板中被遗忘。相反，它们可以直接放置在Mac的桌面上–它们也是交互式的。不使用时，macOS桌面小部件会采用单色样式淡入背景，从而减少干扰，并允许您专注于活动应用程序或窗口中手头的任务。但是，当您单击桌面时，它们将恢复为全彩色。如果您更喜欢单调的外观，并且希望在桌面上保留这一方面的统一性，那么有一种方法可以使其永久化。以下步骤演示了它是如何完成的。打开“系统设置”应用
Win10系统如何实现双系统切换Jan 03, 2024 pm 05:41 PM很多朋友刚接触win系统的时候可能用不习惯，电脑中存着双系统，这个时候其实是可以双系统切换的，下面就一起来看看两个系统切换的详细步骤吧。win10系统如何两个系统切换方法一、快捷键切换1、按下“win”+“R”键打开运行2、在运行框中输入“msconfig”点击“确定”3、在打开的“系统配置”界面中选择自己需要的系统点击“设为默认值”，完成后“重新启动”即可完成切换方法二、开机时选择切换1、拥有双系统时开机会出现一个选择操作界面，可以使用键盘“上下”键进行选择系统
无法使用win11的alt+tab切换界面，出现的原因是什么？Jan 02, 2024 am 08:35 AMwin11支持用户使用alt+tab快捷键的方式来调出桌面切换工具，但是最近有朋友遇到了win11alt+tab切换不了界面的问题，不知道是什么原因也不知道怎么解决。win11alt+tab切换不了界面什么原因：答：因为快捷键功能被禁用了，下面是解决方法：1、首先我们按下键盘“win+r”打开运行。2、接着输入“regedit”并回车打开组策略。3、然后进入“HKEY_CURRENT_USER\SOFTWARE\Microsoft\Windows\CurrentVersion\Explorer”
WordPress网页错位现象解决攻略Mar 05, 2024 pm 01:12 PMWordPress网页错位现象解决攻略在WordPress网站开发中，有时候我们会遇到网页元素错位的情况，这可能是由于不同设备上的屏幕尺寸、浏览器兼容性或者CSS样式设置不当所致。要解决这种错位现象，我们需要仔细分析问题、查找可能的原因，并逐步进行调试和修复。本文将分享一些常见的WordPress网页错位问题以及相应的解决攻略，同时提供具体的代码示例，帮助开
CSS网页背景图设计：创建各种背景图样式和效果Nov 18, 2023 am 08:38 AMCSS网页背景图设计：创建各种背景图样式和效果，需要具体代码示例摘要：在网页设计中，背景图是一种重要的视觉元素，它可以有效地增强页面的吸引力和可读性。本文将介绍一些常见的CSS背景图设计样式和效果，并提供相应的代码示例。读者可以根据自己的需求和喜好来选择和应用这些背景图样式和效果，以达到更好的视觉效果和用户体验。关键词：CSS，背景图，设计样式，效果，代码示
win10切换输入法快捷键如何设置的步骤教程Jul 11, 2023 pm 01:53 PM我们在安装win10系统之后，会发现里面自带有拼音输入法和五笔输入法，当我们要切换输入法的时候，快捷键一般是Alt+shift，但有些人不习惯，想要修改，今天小编来跟大家说说win10切换输入法快捷键如何设置的教程，大家一起来看看吧。1、“WIN+X键"或者"鼠标移动到左下角右击"调出系统功能菜单，单击控制面板；2、在时钟、语言和区域选项中，单击添加语言或更换输入法其中一个，均会跳到同一界面；3、点击左上角的高级设置选项；4、高级设置下面点击“更改语言栏热键”；5、
无法在Win11中使用Alt+Tab切换界面Jan 05, 2024 pm 12:21 PM有时候在使用快捷键切电脑软件屏幕的时候会出现切换不了的现象，这是因为快捷键被禁用了，不过我们也是可以恢复这项功能的，下面一起来看看吧。win11alt+tab切换不了界面：1、首先我们“win+r”进入运行。2、在运行界面输入“regedit”。3、接着进入“HKEY_CURRENT_USER\SOFTWARE\Microsoft\Windows\CurrentVersion\Explorer”。4、双击打开右边的“AltTabSettings”设置。5、要是没有的话就新建一个AltTabSet
Vue中如何处理组件的动态加载和切换Oct 15, 2023 pm 04:34 PMVue中处理组件的动态加载和切换Vue是一个流行的JavaScript框架，它提供了各种灵活的功能来处理组件的动态加载和切换。在本文中，我们将讨论一些Vue中处理组件动态加载和切换的方法，并提供具体的代码示例。动态加载组件是指根据需要在运行时动态加载组件。这样可以提高应用程序的性能和加载速度，因为只有当需要时才会加载相关的组件。Vue提供了async和awa
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
ZendStudio 13.5.1 Mac
Powerful PHP integrated development environment
MinGW - Minimalist GNU for Windows
This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.
Notepad++7.3.1
Easy-to-use and free code editor
VSCode Windows 64-bit Download
A free and powerful IDE editor launched by Microsoft
SAP NetWeaver Server Adapter for Eclipse
Integrate Eclipse with SAP NetWeaver application server.
