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
Atas ialah kandungan terperinci vue实现tab切换外加样式切换方法. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1376
52
macOS: Cara menukar warna widget desktop
Oct 07, 2023 am 08:17 AM
Dalam macOS Sonoma, widget tidak perlu disembunyikan di luar skrin atau dilupakan dalam panel Pusat Pemberitahuan seperti yang dilakukan dalam versi sebelumnya macOS Apple. Sebaliknya, ia boleh diletakkan terus pada desktop Mac anda - ia juga interaktif. Apabila tidak digunakan, widget desktop macOS memudar ke latar belakang dalam gaya monokrom, mengurangkan gangguan dan membolehkan anda menumpukan pada tugas yang sedang dijalankan dalam aplikasi atau tetingkap aktif. Walau bagaimanapun, apabila anda mengklik pada desktop, ia kembali kepada warna penuh. Jika anda lebih suka rupa yang menjemukan dan ingin mengekalkan aspek keseragaman itu pada desktop anda, ada cara untuk menjadikannya kekal. Langkah-langkah berikut menunjukkan cara ia dilakukan. Buka apl Tetapan Sistem
Bagaimana untuk bertukar antara 4g dan 5g pada Xiaomi Mi 14Ultra?
Feb 23, 2024 am 11:49 AM
Xiaomi 14Ultra adalah salah satu model Xiaomi yang paling popular tahun ini bukan sahaja menaik taraf pemproses dan pelbagai konfigurasi, tetapi juga membawa banyak aplikasi berfungsi kepada pengguna Ini boleh dilihat dari jualan telefon bimbit Xiaomi 14Ultra popular, tetapi terdapat beberapa fungsi yang biasa digunakan yang mungkin belum anda ketahui. Jadi bagaimanakah Xiaomi 14Ultra bertukar antara 4g dan 5g? Izinkan saya memperkenalkan kandungan khusus kepada anda di bawah! Bagaimana untuk menukar antara 4g dan 5g pada Xiaomi 14Ultra? 1. Buka menu tetapan telefon anda. 2. Cari dan pilih pilihan "Rangkaian" dan "Rangkaian Mudah Alih" dalam menu tetapan. 3. Dalam tetapan rangkaian mudah alih, anda akan melihat pilihan "Jenis rangkaian pilihan". 4. Klik atau pilih pilihan ini dan anda akan melihat
Tutorial operasi untuk menukar daripada versi rumah win11 kepada versi profesional_Tutorial operasi untuk menukar daripada versi rumah win11 kepada versi profesional
Mar 20, 2024 pm 01:58 PM
Bagaimana untuk menukar Win11 Home Edition kepada Win11 Professional Edition? Dalam sistem Win11, ia dibahagikan kepada Home Edition, Professional Edition, Enterprise Edition, dan lain-lain, dan kebanyakan komputer riba Win11 telah dipasang dengan sistem Win11 Home Edition. Hari ini, editor akan menunjukkan kepada anda langkah-langkah untuk beralih daripada versi rumah win11 kepada versi profesional 1. Pertama, klik kanan pada komputer ini pada desktop dan sifat win11. 2. Klik Tukar Kunci Produk atau Tingkatkan Windows. 3. Kemudian klik Tukar Kunci Produk selepas memasukkan. 4. Masukkan kekunci pengaktifan: 8G7XN-V7YWC-W8RPC-V73KB-YWRDB dan pilih Seterusnya. 5. Kemudian ia akan mendorong kejayaan, jadi anda boleh menaik taraf versi rumah win11 kepada versi profesional win11.
Bagaimana untuk melaksanakan pensuisan sistem dwi dalam sistem Win10
Jan 03, 2024 pm 05:41 PM
Ramai rakan mungkin tidak terbiasa dengan sistem menang apabila mereka mula-mula bersentuhan dengannya. Terdapat dua sistem dalam komputer Pada masa ini, anda sebenarnya boleh beralih antara kedua-dua sistem antara dua sistem. Bagaimana untuk menukar antara dua sistem dalam sistem win10 1. Pensuisan kekunci pintasan 1. Tekan kekunci "win" + "R" untuk membuka larian 2. Masukkan "msconfig" dalam kotak larian dan klik "OK" 3. Dalam " yang dibuka " konfigurasi sistem" Dalam antara muka, pilih sistem yang anda perlukan dan klik "Tetapkan sebagai Lalai". Selepas selesai, "Mulakan semula" boleh melengkapkan suis. Kaedah 2. Pilih suis semasa but 1. Apabila anda mempunyai sistem dwi, antara muka operasi pemilihan akan muncul semasa but Anda boleh menggunakan papan kekunci " Atas dan bawah untuk memilih sistem
Tukar mod but sistem dwi komputer Apple
Feb 19, 2024 pm 06:50 PM
Cara bertukar antara sistem dwi Apple apabila memulakan komputer Apple adalah peranti berkuasa Selain sistem pengendalian macOS mereka sendiri, anda juga boleh memilih untuk memasang sistem pengendalian lain, seperti Windows, untuk mencapai pensuisan dwi sistem. Jadi bagaimana kita bertukar antara kedua-dua sistem semasa boot? Artikel ini akan memperkenalkan kepada anda cara menukar antara sistem dwi pada komputer Apple. Pertama sekali, sebelum memasang sistem dwi, kami perlu mengesahkan sama ada komputer Apple kami menyokong pensuisan dwi sistem. Secara umumnya, komputer Apple adalah berasaskan
Cara menggunakan kekunci pintasan untuk menukar buku kerja dalam excel
Mar 20, 2024 pm 01:50 PM
Dalam aplikasi perisian excel, kita terbiasa menggunakan kekunci pintasan untuk membuat beberapa operasi lebih mudah dan lebih cepat Kadang-kadang terdapat data yang berkaitan antara beberapa jadual dalam excel Apabila kita melihatnya, kita perlu sentiasa bertukar antara tugas kaedah pensuisan yang lebih cepat, ia akan menjimatkan banyak masa yang terbuang pada pensuisan, yang akan sangat membantu meningkatkan kecekapan kerja Apakah kaedah yang boleh digunakan untuk menyelesaikan isu ini, editor akan membincangkannya hari ini Kandungannya ialah: Bagaimana untuk menggunakan kekunci pintasan untuk menukar buku kerja dalam Excel. 1. Mula-mula, anda boleh melihat berbilang buku kerja di bahagian bawah jadual excel terbuka Anda perlu bertukar dengan cepat antara buku kerja yang berbeza, seperti yang ditunjukkan dalam rajah di bawah. 2. Kemudian tekan kekunci Ctrl pada papan kekunci tanpa bergerak, dan pilih kerja di sebelah kanan jika anda perlu
Saya tidak boleh menggunakan alt+tab untuk menukar antara muka dalam win11. Apakah sebabnya?
Jan 02, 2024 am 08:35 AM
Win11 menyokong pengguna untuk menggunakan kekunci pintasan alt+tab untuk memaparkan alat penukaran desktop, tetapi baru-baru ini seorang rakan menghadapi masalah yang win11 alt+tab tidak boleh menukar antara muka saya tidak tahu sebab atau cara menyelesaikannya. Mengapa win11 alt+tab tidak boleh menukar antara muka Jawapan: Kerana fungsi kekunci pintasan dilumpuhkan, berikut ialah penyelesaiannya: 1. Pertama, kita tekan "win+r" pada papan kekunci untuk membuka larian. 2. Kemudian masukkan "regedit" dan tekan Enter untuk membuka dasar kumpulan. 3. Kemudian masukkan "HKEY_CURRENT_USER\SOFTWARE\Microsoft\Windows\CurrentVersion\Explorer"
Panduan untuk menyelesaikan salah jajaran halaman web WordPress
Mar 05, 2024 pm 01:12 PM
Panduan untuk menyelesaikan halaman web WordPress yang tidak sejajar Dalam pembangunan tapak web WordPress, kadangkala kami menghadapi elemen halaman web yang tidak sejajar Ini mungkin disebabkan oleh saiz skrin pada peranti yang berbeza, keserasian penyemak imbas atau tetapan gaya CSS yang tidak betul. Untuk menyelesaikan salah jajaran ini, kita perlu menganalisis masalah dengan teliti, mencari kemungkinan punca dan nyahpepijat serta membaikinya langkah demi langkah. Artikel ini akan berkongsi beberapa masalah salah jajaran laman web WordPress biasa dan penyelesaian yang sepadan, dan memberikan contoh kod khusus untuk membantu membangunkan
