Vue.js組件tab實(shí)現(xiàn)選項(xiàng)卡切換
更新時(shí)間：2020年03月23日 10:05:01 作者：那支歌
這篇文章主要為大家詳細(xì)介紹了Vue.js組件tab實(shí)現(xiàn)選項(xiàng)卡切換的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了vue插件tab選項(xiàng)卡的具體代碼，供大家參考，具體內(nèi)容如下
效果圖：
代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{padding: 0;margin: 0}
#app{
width: 500px;height: 300px;margin: 0 auto;background-color: #ddd;
}
.top{
height: 50px;line-height: 50px;width: 100%;background-color: #999;
}
.top ul li{display: inline-block;margin:0 10px;}
.top ul li a{text-decoration: none;color: white;}
.bottom{
}
</style>
</head>
<body>
<div id="app">
<div class="top">
<ul>
<li><a href="javascript:;" @click='tabToggle(tab01Text);'>{{tab01Text}}</a></li>
<li><a href="javascript:;" @click='tabToggle(tab02Text);'>{{tab02Text}}</a></li>
<li><a href="javascript:;" @click='tabToggle(tab03Text);'>{{tab03Text}}</a></li>
</ul>
</div>
<div class="bottom">
<component :is='currentView' keep-alive></component>
</div>
</div>
<script type="text/javascript" src='vue.js'></script>
<script>
var tab01 = Vue.extend({
template:'<p>This is tab01</p>'
})
var tab02 = Vue.extend({
template:'<p>This is tab02</p>'
})
var tab03 = Vue.extend({
template:'<p>This is tab03</p>'
})
var app = new Vue({
el:'#app',
data:{
tab01Text:'tab01',
tab02Text:'tab02',
tab03Text:'tab03',
currentView:'tab01'
},
components:{
tab01:tab01,
tab02:tab02,
tab03:tab03
},
methods:{
tabToggle:function(tabText){
this.currentView=tabText
}
}
})
</script>
</body>
</html>
本文已被整理到了《Vue.js前端組件學(xué)習(xí)教程》，歡迎大家學(xué)習(xí)閱讀。
關(guān)于vue.js組件的教程，請(qǐng)大家點(diǎn)擊專題vue.js組件學(xué)習(xí)教程進(jìn)行學(xué)習(xí)。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- 詳解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 Tab切換以及緩存頁(yè)面處理的幾種方式
- VUE的tab頁(yè)面切換的四種方法
- vue實(shí)現(xiàn)tab切換的3種方式及切換保持?jǐn)?shù)據(jù)狀態(tài)
- vue實(shí)現(xiàn)tab切換外加樣式切換方法
- vue實(shí)現(xiàn)tab欄切換效果
相關(guān)文章
這篇文章主要介紹了vue?遮罩和ref的使用，setup版和非setup版,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-03-03
這篇文章主要給大家介紹了關(guān)于vue路由教程之靜態(tài)路由的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
vue給對(duì)象添加屬性沒(méi)有響應(yīng)式的問(wèn)題及解決
這篇文章主要介紹了vue給對(duì)象添加屬性沒(méi)有響應(yīng)式的問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
Vue render渲染時(shí)間戳轉(zhuǎn)時(shí)間,時(shí)間轉(zhuǎn)時(shí)間戳及渲染進(jìn)度條效果
這篇文章主要介紹了Vue render渲染時(shí)間戳轉(zhuǎn)時(shí)間,時(shí)間轉(zhuǎn)時(shí)間戳及渲染進(jìn)度條效果,通過(guò)實(shí)例代碼相結(jié)合的形式給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-07-07
這兩天學(xué)習(xí)了Vue.js 感覺(jué)組件這個(gè)地方知識(shí)點(diǎn)挺多的，而且很重要，所以這篇文章主要給大家介紹了關(guān)于Vue中自定義全局組件的實(shí)現(xiàn)方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2017-12-12
vue-cli+iview項(xiàng)目打包上線之后圖標(biāo)不顯示問(wèn)題及解決方法
這篇文章主要介紹了解決vue-cli+iview項(xiàng)目打包上線之后圖標(biāo)不顯示問(wèn)題,本文通過(guò)兩種方法給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-10-10
Vue動(dòng)態(tài)組件和keep-alive組件實(shí)例詳解
動(dòng)態(tài)組件指的是動(dòng)態(tài)切換組件的顯示與隱藏,下面這篇文章主要給大家介紹了關(guān)于Vue動(dòng)態(tài)組件和keep-alive組件的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-05-05
在vue中實(shí)現(xiàn)禁止屏幕滾動(dòng),禁止屏幕滑動(dòng)
這篇文章主要介紹了在vue中實(shí)現(xiàn)禁止屏幕滾動(dòng),禁止屏幕滑動(dòng)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
這篇文章主要介紹了vue.js body的css不生效問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
這篇文章主要介紹了vue的路由映射問(wèn)題及解決方案,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-10-10