vue實現(xiàn)tab切換外加樣式切換方法

更新時間：2018年03月16日 09:00:36 作者：J_Q_K_A

下面小編就為大家分享一篇vue實現(xiàn)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>
<div 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>
 <div class="box">
  <component :is='currentView' keep-alive></component>
 </div>
</div>
<script src="vue.js"></script>
<script>
 const text1 = Vue.component('text1', {template: `<div><h1>Text111111111111</h1></div>`});
 const text2 = Vue.component('text2', {template: `<div><h1>Text222222222222</h1></div>`});
 const text3 = Vue.component('text3', {template: `<div><h1>Text333333333333</h1></div>`});
 const text4 = Vue.component('text4', {template: `<div><h1>Text444444444444</h1></div>`});
 const text5 = Vue.component('text5', {template: `<div><h1>Text555555555555</h1></div>`});
 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實現(xiàn)tab切換外加樣式切換方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

關(guān)于element-ui表頭吸附問題的解決方案
數(shù)據(jù)過多滑動表格的時候,看不到表頭不知道對應(yīng)的數(shù)據(jù)是什么,用戶體驗操作不友好,要改成表頭固定住,所以本文給大家介紹了關(guān)于element-ui表頭吸附問題的兩個解決方案,需要的朋友可以參考下
2024-01-01
Elementui如何限制el-input框輸入小數(shù)點
這篇文章主要介紹了Elementui如何限制el-input框輸入小數(shù)點，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-08-08
element日期組件實現(xiàn)只能選擇小時或分鐘
本文主要介紹了element日期組件實現(xiàn)只能選擇小時或分鐘，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-01-01
vue - vue.config.js中devServer配置方式
今天小編就為大家分享一篇vue - vue.config.js中devServer配置方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-10-10
Vue.js開發(fā)環(huán)境快速搭建教程
這篇文章主要為大家詳細(xì)介紹了Vue.js開發(fā)環(huán)境快速搭建教程，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-03-03
一文帶你詳細(xì)了解vue axios的封裝
對請求的封裝在實際項目中是十分必要的,它可以讓我們統(tǒng)一處理 http 請求,比如做一些攔截,處理一些錯誤等,本篇文章將詳細(xì)介紹如何封裝 axios 請求,需要的朋友可以參考下
2023-09-09
Nuxt3項目搭建過程(Nuxt3+element-plus+scss詳細(xì)步驟)
這篇文章主要介紹了Nuxt3項目搭建（Nuxt3+element-plus+scss詳細(xì)步驟）,本次記錄一次使用Nuxt3搭建前端項目的過程，內(nèi)容包含Nuxt3的安裝，基于Vite腳手架（默認(rèn)）構(gòu)建的vue3項目，element-plus的安裝配置，scss的安裝，目錄結(jié)構(gòu)的創(chuàng)建和解釋，需要的朋友可以參考下
2022-12-12
Vue中如何獲取json文件中的數(shù)據(jù)
訪問百度音樂API需要傳遞音樂類型參數(shù)，而這些參數(shù)是存在musictype.json中，現(xiàn)在在組件listcate.vue需要獲取json數(shù)據(jù)，如何實現(xiàn)呢，下面小編給大家?guī)砹薞ue中如何獲取json文件中的數(shù)據(jù)，感興趣的朋友一起看看吧
2022-09-09
VueJs組件之父子通訊的方式
這篇文章主要介紹了VueJs組件之父子通訊的方式，非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下
2018-05-05
Vue腳手架安裝時遇到的無法安裝問題詳解
開發(fā)中遇到bug是在正常不過了,而程序也基本都是bug堆里爬出來的,下面這篇文章主要給大家介紹了關(guān)于Vue腳手架安裝時遇到的無法安裝問題的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-07-07