zoukankan      html  css  js  c++  java
  • vue中的tab

    <template>
       <div>
            <ul class="tab-tilte">
                <li v-for="(title,index) in tabTitle"
                    @click="cur=index"
                    :class="{active:cur==index}">
                    {{title}}
                </li> 
            </ul>
    
            <div class="tab-content">
                 <div v-for="(m,index) in tabMain"
                      v-show="cur==index">
                      {{m}}
                </div>
            </div>
       </div>
    
    
    </template>
    
    
    
    <script>
      export default{
          data(){
              return{
                  tabTitle:['标题一','标题二','标题三','标题四'],
                  tabMain:['内容一','内容二','内容三','内容四'],
                  cur:0
              }
          }
      }
    
    
    </script>
    
    <style scoped>
     .tab-tilte{
                 90%;
            }
            .tab-tilte li{
                float: left;
                 25%;
                height:20px;
                padding: 10px 0;
                text-align: center;
                background-color:skyblue;
                cursor: pointer;
            }
         /* 点击对应的标题添加对应的背景颜色 */
            .tab-tilte .active{
                background-color: #09f;
                color: #fff;
            }
            .tab-content div{
                float: left;
                 25%;
                line-height: 100px;
                text-align: center;
            }
    
    </style>
    

      

  • 相关阅读:
    (14) go 结构体
    (13) go map
    (12) go make初始化
    (11)go 数组和切片
    (10) go 错误
    (9) go 时间日期
    (8)go 字符串
    (7) go 函数
    (6) go 流程控制
    (5) go 格式化输入输出 类型转换
  • 原文地址:https://www.cnblogs.com/fei3/p/12001415.html
Copyright © 2011-2022 走看看