lovecoding
/
W260426


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677
							<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
    <style>
        .tab-page{
            width: 600px;
            height: 400px;
            border:3px solid #000;
            margin: 100px auto;
        }
        .tab-nav{
            height: 60px;
            background-color: #333;
        }
        .tab-nav .tab-item{
            float: left;
            height: 60px;
            width: 120px;
            text-align: center;
            line-height: 60px;
            color: #fff;
        }
        .tab-nav .tab-item.active{
            background-color: #ddd;
            color: #000;
        }
        .tab-content{
            padding:20px;
        }
        /* .tab-content .tab-content-item{
            display: none;
        }
        .tab-content .tab-content-item.active{
            display: block;
        } */
    </style>
</head>

<body>
    <div id="app" class="tab-page">
        <div class="tab-nav">
            <!-- <div v-bind:class="['tab-item',{'active':activeIndex==0}]" @click="changeTab(0)">第一节课</div>
            <div :class="['tab-item',{'active':activeIndex==1}]" @click="changeTab(1)">第二节课</div>
            <div :class="['tab-item',{'active':activeIndex==2}]" @click="changeTab(2)">第三节课</div> -->
             <div v-bind:class="['tab-item',{'active':activeIndex==0}]" @click="activeIndex=0">第一节课</div>
            <div :class="['tab-item',{'active':activeIndex==1}]" @click="activeIndex=1">第二节课</div>
            <div :class="['tab-item',{'active':activeIndex==2}]" @click="activeIndex=2">第三节课</div>
        </div>
        <div class="tab-content">
            <div class="tab-content-item" v-if="activeIndex==0">第一节课的内容</div>
            <div class="tab-content-item" v-else-if="activeIndex==1">第二节课的内容</div>
            <div class="tab-content-item" v-else-if="activeIndex==2">第三节课的内容</div>
        </div>
    </div>

    <script>
        new Vue({
            el:"#app",
            data:{
                activeIndex:0
            },
            methods:{
                // changeTab(index){
                //     console.log(index)
                //     this.activeIndex = index
                // }
            }
        })
    </script>
</body>

</html>