如何讓vue的tab中的數(shù)據(jù), 在html全部展示出來?

1.現(xiàn)在已經(jīng)實(shí)現(xiàn)tab的切換, 但是數(shù)據(jù)都是從vue的data實(shí)例中遍歷出來的, 如何把data實(shí)例中的數(shù)據(jù)取出來放在html結(jié)構(gòu)里面, 因?yàn)閿?shù)據(jù)不可能只有一點(diǎn), 所以放在data里面不是很方便, 比如我的wrap現(xiàn)在只有一個(gè), 但是我想讓wrap變成6個(gè)寫在html結(jié)構(gòu)里面, 請(qǐng)小伙伴多多指教一下
html

  <div class="chart clearfix">
    <div class="btn-group fl">
      <button v-for="(item,index) in btn" v-bind:class="{active:(indexs==index)}" v-on:click="nav(index)" :key="index">{{item}}</button>
    </div>
    <div class="wrap fl">
      <div v-for="(w,key,index) in box" v-if="indexs == index" :key="index">{{w}}-{{key}}</div>
    </div>
  </div>

js

export default {
  data() {
    return {
      btn: [
        "監(jiān)測(cè)點(diǎn)信息",
        "喬木分布",
        "徑級(jí)分布",
        "重要值",
        "多樣性分析",
        "數(shù)據(jù)展示"
      ],
      box: {
        aa: "tab切換1",
        bb: "tab切換2",
        cc: "tab切換3",
        dd: "tab切換4",
        ee: "tab切換5",
        ff: "tab切換6"
      },
      indexs: 0
    };
  },
  methods: {
    nav(str) {
      this.indexs = str;
    }
  }
};