vue实现简单tab栏切换效果

项目中经常用到tab切换效果，一开始都是找插件做，后来偶然的一次发现用Vue实现很简单...

不多说了直接上代码。

HTML结构：

<div id="demo">
    <div class="demo1"
         v-for="(t,index) in tab"
         @click="demoClick(index)"
         :class="{demoColor:index == tabNum}">{{t}}
    </div>
    <div class="demo2" v-for="(c,index) in content" v-if="index == tabNum">{{c}}</div>
</div>

CSS片段：

.demo1 {
    margin: 10px;
    cursor: pointer;
}

.demoColor {
    color: #6cf;
}

.demo2 {
    color: #ff4040;
    margin-top: 50px;
    padding-left: 10px;
    border-top: 1px solid #ccc;
}

 

JS片段：

var vm = new Vue({
    el: "#demo",
    data: function () {
        return {
            tab: ["标题一","标题二","标题三"],
            content: ["内容一","内容二","内容三"],
            tabNum: 0
        }
    },
    methods: {
        demoClick: function (index) {
            this.tabNum = index;
        }
    }
})

效果图：