vuejs实现的的竖向tab选项卡_vue创建垂直的选项卡-优快云博客

本文链接：https://blog.youkuaiyun.com/ysydao/article/details/53576389

这篇博客展示了如何使用Vue.js实现一个竖向的选项卡功能。通过HTML、CSS和JavaScript，创建了一个包含三个选项卡（tab01、tab02、tab03）的组件，每个选项卡内容可以通过点击对应的选项卡进行切换，切换过程中带有淡入淡出的动画效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <style type="text/css">
        *{padding: 0;margin: 0}
        #tabemplyee{
        	 width: 800px;height: 300px;margin: 0 auto; background-color: #ddd;
        }
        .e_tab{
            height: 100%;line-height: 50px;background-color: #999;padding: 0;
        }
        .e_tab ul li{ display:block;margin:10px 0; width:100%;text-align: center;color: #fff; cursor: pointer;}
        .e_tab ul li a{text-decoration: none;color: #fff;}
        .e_tab_bd{  margin: 3%;}
        .active{
           background-color: #337ab7;
           border-radius: 4px;
        }
        /*切换动画*/
		.fade-transition {
		    transition: opacity 0.3s ease;
		}
		.fade-enter,
		.fade-leave {
		    opacity: 0;
		}
		.fa{
			width: 0;
			height: 0;
			border-top: 25px solid transparent;
			border-right: 25px solid #fff;
			border-bottom: 25px solid transparent;
		}
		.fa2{
		    display:block;
			border-color: transparent #fff transparent transparent;
			border-style: dashed solid dashed dashed;
			border-width: 25px;
		}
    </style>
</head>
<body>
    <div class="row" id="tabemplyee">
        <div class="col-md-2 e_tab">
             <ul class="e_navbar">
                <li class="e_navbar_item"
                    v-for="(tab, index) in tabs"
                    :class="{'active':index===selected}"
                    @click="choose(index)"><i :class="{'fa':index===selected}" style="float:right"></i>{{tab.tabName}}
                 </li>
            </ul>
        </div>
        <div class="col-md-8 e_tab_bd">
            <component :is="currentView" transition="fade" transition-mode="out-in"></component>
        </div>
        
    </div>
    <script type="text/javascript" src='js/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:'.row',
            data(){
              return{
            	tabs:[
                    {tabName:'tab01'},
                    {tabName:'tab02'},
                    {tabName:'tab03'},
                 ],
                selected:0,
                currentView:'tab_0',
              }
            },
            components:{
                'tab_0':tab01,
                'tab_1':tab02,
                'tab_2':tab03
            },
            methods:{
               choose(index) {
                   this.selected=index;
                   this.currentView='tab_'+index;
               }
            }
        })
    </script>
    <script type="text/javascript" src="js/jquery-2.2.1.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
</body>
</html>