vue中实现点击按钮（多个）添加样式并展示对应内容（模块）

vue中实现点击按钮（多个）添加样式并展示对应内容（模块）
类似tab栏切换
展示对应模块这里实现两种
一种是展示不同模块
第二种是根据值展示相同模块

<template>
  <div class="all">
    <div class="role-content">
      <div
        class="role-btn "
        @click="roleChecked0"
        :class="role0 == true ? 'active' : ''"
      >
        测试1
      </div>
      <div
        class="role-btn "
        @click="roleChecked1"
        :class="role1 == true ? 'active' : ''"
      >
        测试2
      </div>
      <div
        class="role-btn "
        @click="roleChecked2"
        :class="role2 == true ? 'active' : ''"
      >
        测试3
      </div>
      <!-- 一种是展示不同模块 -->
      <div v-if="status === '测试1'">测试一配套显示</div>
      <div v-if="status === '测试2'">测试二配套显示</div>
      <div v-if="status === '测试3'">测试三配套显示</div>
      <!-- 第二种是根据值展示相同模块 -->
      <div v-if="demo.includes(this.status)">
        当点击测试的三个按钮，只有status是'测试2''测试3'才会展示，点击测试一按钮无效
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      role0: true,
      role1: false,
      role2: false,
      status: '测试1',
      demo: ['测试2', '测试3']
    }
  },
  methods: {
    roleChecked0() {
      this.role0 = true
      this.role1 = false
      this.role2 = false
      this.status = '测试1'
    },
    roleChecked1() {
      this.role0 = false
      this.role1 = true
      this.role2 = false
      this.status = '测试2'
    },
    roleChecked2() {
      this.role0 = false
      this.role1 = false
      this.role2 = true
      this.status = '测试3'
    }
  }
}
</script>

<style lang="scss" scoped>
.all {
  // 点击添加类的样式
  .active {
    color: #000;
    border: 1px solid #f00;
  }
  //主体部分的样式
  .role-content {
    .role-btn {
      font-size: 14px;
      width: 60px;
      height: 80px;
      line-height: 80px;
      text-align: center;
      margin-right: 15px;
      display: inline-block;
      background-color: #f6f6f6;
    }
  }
}
</style>

注：在这里初始值一定要设置正确，不然会出现刚进入页面添加类的按钮和下面展示的模块不对应
关于点击添加类的样式在style中的位置，在all外面和里面都可以实现