Vue.js组件tab实现选项卡切换

2019-11-19 17:15:04

字体：大中小

来源：转载

供稿：网友

本文实例为大家分享了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组件学习教程进行学习。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：jQuery插件zTree实现的多选树效果示例

下一篇：jQuery插件zTree实现的基本树与节点获取操作示例