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

本文实例为大家分享了某视频剪辑软件插件标签选项卡的具体代码，供大家参考，具体内容如下

效果图：

代码如下：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title document/title style type=' text/CSS ' * { padd : 0；边距： 0 } # app {宽度： 500 px高： 300pxmargin: 0自动背景色： # DDD；} .顶部{高度： 50像素线高： 50px宽度： 100%;背景色： # 999;} .顶级ul li {显示：内嵌块；margin:0 10px }。顶级阿利{文本-装饰：无；颜色：白色；} .bottom { }/style/head body div id=' app ' div class=' top ' ul lia href=' JavaScript :rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' @ click=' tabToggle(tab01 text)；{ { Tab 01 Text } }/a/Li lia href=' JavaScript :rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' @ click=' tabToggle(tab02 text)；{ { Tab 02 Text } }/a/Li lia href=' JavaScript :rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' @ click=' tabToggle(tab03 text)；{ { tab 03 text } }/a/Li/ul/div class=' bottom '组件： is=' currentView '保持活动/组件/div/div脚本类型=' text/JavaScript ' src=' Vue。js /脚本var tab01=Vue。扩展({ template : ' pThis是tab01/p ' })var tab02=Vue。扩展({ template : ' pThis是tab02/p' })本文已被整理到了《Vue.js前端组件学习教程》 ,欢迎大家学习阅读。

关于vue.js组件的教程，请大家点击专题vue.js组件学习教程进行学习。

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