vue的v-if和v-show

现象：转换a和b时，下面的数据类别没有渲染成选中的状态

代码：

<template>
  <div class="content">
    <div class='slt-btn'>
      <div class="content-nav">
        <h3 class="mt10 mr20">选择业务：</h3>
        <RadioGroup v-model="bbbbbbbbb" type="button" @on-change="change">
          <Radio v-for="(item,index) in bbb" :key='index' :label="item.id">{{item.name}}</Radio>
        </RadioGroup>
      </div>
    </div>
    <div class='slt-btn'>
      <div v-if="!itype">
        <h3 class='fl mr20 mt10'>数据类别：</h3>
        <RadioGroup v-model="ccccccccc" type="button" @on-change='aaaaChange'>
          <Radio v-for="(item,index) in nav" :key='index' :label="item.id">{{item.name}}</Radio>
        </RadioGroup>
      </div>
      <div v-if="itype">
        <h3 class='fl mr20 mt10'>数据类别：</h3>
        <RadioGroup v-model="aaaaaaaaaaa" type="button" @on-change='bbbbChange'>
          <Radio v-for="(item,index) in nav1" :key='index' :label="item.id">{{item.name}}</Radio>
        </RadioGroup>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "test",
    props: {},
    components: {},
    data() {
      return {
        itype: false,
        bbbbbbbbb: 0,
        ccccccccc: 1,
        aaaaaaaaaaa: 4,
        bbb: [
          {
            id: 0,
            name: 'aaaaaaaaaaaa'
          },
          {
            id: 1,
            name: 'bbbbbbbbbbbbb'
          }
        ],
        currentObj: {
          id: 1,
          name: 'CPM展示数',
          color: {
            item: 'rgba(92,184,92,1)',
            line: 'rgba(92,184,92,0.7)'
          }
        },
        nav1: [
          {
            id: 4,
            name: 'bb：ggggggggg',
            color: {
              item: 'rgba(92,184,92,1)',
              line: 'rgba(92,184,92,0.7)'
            }
          },
          {
            id: 5,
            name: 'bb：hhhhhhhhhhh',
            color: {
              item: 'rgba(255,153,0,1)',
              line: 'rgba(255,153,0,0.7)'
            }
          },
        ],
        nav: [
          {
            id: 1,
            name: 'aaaaaaaaa：ddddddddd',
            color: {
              item: 'rgba(92,184,92,1)',
              line: 'rgba(92,184,92,0.7)'
            }
          },
          {
            id: 2,
            name: 'aaaaaaaaa：eeeeeeeeee',
            color: {
              item: 'rgba(255,153,0,1)',
              line: 'rgba(255,153,0,0.7)'
            }
          },
          {
            id: 3,
            name: 'aaaaaaaaa：fffffffff',
            color: {
              item: 'rgba(255,65,0,1)',
              line: 'rgba(255,65,0,0.7)'
            }
          }
        ],
      };
    },
    methods: {
      change() {
        if (this.bbbbbbbbb == 0) {
          this.itype = false;
        } else {
          this.itype = true;
        }
      },
      aaaaChange() {
        for (let item of this.nav) {
          if (item.id == this.ccccccccc) {
            this.currentObj = item;
            break;
          }
        }
        console.log("aaaaChange|",this.currentObj);
      },
      bbbbChange() {
        for (let item of this.nav1) {
          if (item.id == this.aaaaaaaaaaa) {
            this.currentObj = item;
            break;
          }
        }
        console.log("bbbbChange|",this.currentObj);
      },
    },
  };
</script>

<style scoped lang="scss">
  #chart {
    background-color: #fff
  }

  .content {
    padding-bottom: 100px;
  }

  .table-top {
    border-top: #ddd dashed 1px;
    padding-top: 15px;
    margin: 20px 0;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }

  .slt-btn {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
  }

  .content-nav {
    display: flex;
    padding: 0px;
    margin-bottom: 0px;
    background: #f5f6f8;

  }

  .content-nav:after {
    content: "";
    clear: both;
    display: block;
  }

  .content-nav ul {
    border: 1px solid #ccd5dc;
    overflow: hidden;
    margin: 0;
    padding: 0;
    display: block;
    width: 100%;
    float: left;

  }

  .content-nav ul li {
    cursor: pointer;
    text-align: center;
    padding: 8px 26px;
    font-size: 12px;
    border-right: 1px solid #ccd5dc;
    display: inline-block;
  }

  .content-nav ul li:last-child {
    border-right: 0;
  }

  .content-nav ul li.choose {
    background: #74859f;
    color: #fff;
  }
</style>

将代码中的v-if改成v-show后正常

结果：