<style>
    * {
        margin: 0;
        padding: 0;
    }
    #app {
        width: 555px;
        height: 444px;
        border: 1px solid #cccccc;
        margin: 0 auto;
    }
    ul li {
        list-style: none;
        float: left;
        width: 25%;
        background-color: #f4f4f4;
        line-height: 40px;
        cursor: pointer;
        text-align: center;
    }
    .active {
        background-color: dodgerblue;
        color: white;
    }
</style>
<body>
    <div id="app">
        <!-- 选项卡标题 -->
        <div>
            <ul>
                <li :class="{active:current===0}" @click="changeTab(0)">选项卡1</li>
                <li :class="{active:current===1}" @click="changeTab(1)">选项卡2</li>
                <li :class="{active:current===2}" @click="changeTab(2)">选项卡3</li>
                <li :class="{active:current===3}" @click="changeTab(3)">选项卡4</li>
            </ul>
        </div>
        <!-- 选项卡内容 -->
        <div>
            <div v-show="current===0">选项卡1的内容</div>
            <div v-show="current===1">选项卡2的内容</div>
            <div v-show="current===2">选项卡3的内容</div>
            <div v-show="current===3">选项卡4的内容</div>
        </div>
    </div>
</body>
<script src="./js/vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            current: 0
        },
        methods: {
            changeTab: function(index){
                // console.log(index);
                this.current = index
            }
        },
    })
</script>

试一试

一沙一世界，一花一天堂。君掌盛无边，刹那成永恒。