vue来实现一个tab效果

其实只要明白js或者jq版的tab效果，在vue或者react上再去实现效果就不难了，无非就是代码不同，思维是相通的。

template

<template>
    <div class="app">
        <div class="tab-box">
            <span :key="index" :class="{active:index===isShow ? true : false}" v-for="(item,index) in tabTitle" @click="selectTab(index)">{{item}}</span>
        </div>
        <div class="tab-main">
            <div :key="index" v-for="(item,index) in tabTitle" class="tab-item" :style="{'display':index === isShow ? 'block' : 'none'}">{{index}}</div>
        </div>
    </div>
</template>

script

<script>
export default {
    data(){
        return {
            isShow:0,
            tabTitle:["tab1","tab2","tab3","tab4"]
        }
    },
    methods: {
        selectTab(i){
            console.log(i);
            this.isShow = i;
        }
    }
}
</script>

style

<style scoped>
    .tab-box{
        border-bottom:solid 1px #dedede;
        height:35px;
    }
    .tab-box span{
        margin-left:10px;
        background: #ccc;
        padding:5px 10px;
    }
    .active{
        background: #f00 !important;
    }
</style>

欢迎关注小程序，感谢您的支持！