vue中的tab

Posted 2020-11-24 fei3

<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{
            width: 90%;
        }
        .tab-tilte li{
            float: left;
            width: 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;
            width: 25%;
            line-height: 100px;
            text-align: center;
        }

</style>