vue.js实现选项卡切换

因为前端课要交一个大作业，刚好工作室的项目需要一个后台管理界面，就自学了一下vue，今天做了一个选项卡切换，最开始的作为菜鸡是用的js做的，太难了T.T，后面学了bootstrap就直接用的组件。今天用了感觉太棒了！比bootstrap的组件好用！！！

一、实现原理

我是用的点击事件进行更改data数据的值，v-if指令根据数据的变化来显示/隐藏内容的

1. 设置1个content数组，用来存储6个选项内容是否显示的boolean值，默认第一个显示

    new Vue({
        el:".body",
        data:{
            a:123,
            content:[true,false,false,false,false,false]
        }
}

2. 在选项内容中使用v-if指令

<div class="main-content h-100">
                <div v-show="content[0]" class="h-100 bg-warning" id="item-user">
                    用户中心
                <div v-show="content[1]" class="h-100" id="">
                    内容管理
                </div>