vue.js 做的选项卡效果

html：

 

      

          

              
{{value.title}}
          
 
          

              
{{value.contan}}
          
           
    
      

css：

 *{
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .content{
        width: 500px;
        margin: 0 auto;
    }
    .box{
        width: 450px;
    }
    .box ul{
        overflow: hidden;
        
    }
    .box .list li{
        float: left;
        font-size: 18px;
        width: 145px;
        text-align: center;
        height: 35px;
        line-height: 35px;
        border: 1px solid #000;
    }
 .main{
     width: 500px;
 }
 .main li{
     height: 150px;
     width: 450px;
     border: 1px solid #000;
    
 }

js：

效果图：

QQ图片20180917164011.png