Vue.js组件tab实现选项卡切换
程序员文章站
2023-11-18 22:37:52
本文实例为大家分享了vue插件tab选项卡的具体代码，供大家参考，具体内容如下
效果图：
代码如下：
<...
本文实例为大家分享了vue插件tab选项卡的具体代码，供大家参考，具体内容如下
效果图：
代码如下：
<!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:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click='tabtoggle(tab01text);'>{{tab01text}}</a></li>
<li><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click='tabtoggle(tab02text);'>{{tab02text}}</a></li>
<li><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" @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前端组件学习教程》，欢迎大家学习阅读。
关于vue.js组件的教程，请大家点击专题vue.js组件学习教程进行学习。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
上一篇： VUE引入第三方js包及调用方法讲解