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)文章
vue elementui el-table 表格里邊展示四分位圖效果(功能實現(xiàn))
這篇文章主要介紹了vue elementui el-table 表格里邊展示四分位圖效果(功能實現(xiàn)),本文通過示例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-04-04
過濾器(Filters)是 vue 為開發(fā)者提供的功能，常用于文本的格式化，這篇文章主要介紹了如何在Vue中定義和調(diào)用過濾器,需要的朋友可以參考下2023-09-09
vue+watermark-dom實現(xiàn)頁面水印效果(示例代碼)
watermark.js 是基于 DOM 對象實現(xiàn)的 BS 系統(tǒng)的水印,確保系統(tǒng)保密性,安全性,降低數(shù)據(jù)泄密風(fēng)險,簡單輕量,支持多屬性配置,本文將通過 vue 結(jié)合 watermark-dom 庫,教大家實現(xiàn)簡單而有效的頁面水印效果,感興趣的朋友跟隨小編一起看看吧2024-07-07
這篇文章主要介紹了在VUE style中使用data中的變量的方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
Vue3結(jié)合TypeScript項目開發(fā)實踐總結(jié)
本文主要介紹了Vue3結(jié)合TypeScript項目開發(fā)實踐總結(jié)，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要介紹了Vue?Cli中的環(huán)境變量和模式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
用vue2.0實現(xiàn)點擊選中active其他選項互斥的效果
這篇文章主要介紹了用vue2.0實現(xiàn)點擊選中active其他選項互斥的效果，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
vue?element-ui如何在el-tabs組件最右側(cè)添加按鈕
這篇文章主要介紹了vue?element-ui如何在el-tabs組件最右側(cè)添加按鈕問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
本文主要介紹了使用Elemen加上lang=“ts“后編譯報錯，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
這篇文章主要給大家介紹了關(guān)于vue3中defineEmits使用的相關(guān)資料,在Vue3中可以使用defineEmits函數(shù)來定義組件的自定義事件,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2023-08-08