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