vue实现标题导航，tab选项卡（一看就会）

冷不防 2021-07-24 18:26 557阅读 0赞

效果图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrbTEyMzQ1Ng_size_16_color_FFFFFF_t_70][]

代码：

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="GBK">
            <title></title>
            <style>
            ul li {
    
                margin: 0;
                padding: 0;
                list-style: none;
            }
            #app {
                width: 600px;
                height: 400px;
                margin: 0 auto;
                border: 1px solid #ccc;
            }
            .tab-tilte{
                width: 90%;
            }
            .tab-tilte li{
                float: left;
                width: 25%;
                padding: 10px 0;
                text-align: center;
                background-color:#f4f4f4;
                cursor: pointer;
            }
         /* 点击对应的标题添加对应的背景颜色 */
            .tab-tilte .active{
                background-color: #09f;
                color: #fff;
            }
            .tab-content div{
                float: left;
                width: 99%;
                line-height: 100px;
                text-align: center;
                font-size: 30px;
            }
            	
            </style>
        </head>
        <body>
        	<div id="app" >
    		    <ul class="tab-tilte">
    		        <li v-for="(t,index) in tabTitle" @click="tab(index)" :class="t.check?'active':''">{
       {t.name}}</li>
    		    </ul>
    		    <div class="tab-content">
    		        <div v-for="(m,index) in tabMain" v-show="cur==index">{
       {m}}</div>
    		    </div>
    		</div> 
        </body>
     	<script src="vue.js"></script>
     	<script>
             new Vue({
                el:'#app',
                data:{
                    tabTitle: [{name:'标题一',check:true}, {name:'标题二',check:false}, {name:'标题三',check:false}, {name:'标题四',check:false}],
                    tabMain: ['这是内容一', '这是内容二', '这是内容三', '这是内容四'],
                    cur: 0 //默认选中第一个tab
                },
                methods:{
                	tab:function(index){
                		this.cur=index;//根据传入的index设置到cur，cur是控制显示哪个content
                		var tabTitle= this.tabTitle;
                		for(var i=0;i<tabTitle.length;i++){
                			var tab = tabTitle[i];
                			if(index===i){//当前点击的选中
                				tab.check=true;
                			}else{//其他的不选中
                				tab.check=false;
                			}
                		}	
                	}
                }
            })
     	</script>	
    		
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrbTEyMzQ1Ng_size_16_color_FFFFFF_t_70]: /images/20210724/1e1376e926284c5ca1fcce25436f43eb.png