如何让vue的tab中的数据, 在html全部展示出来?

Question

1.现在已经实现tab的切换, 但是数据都是从vue的data实例中遍历出来的, 如何把data实例中的数据取出来放在html结构里面, 因为数据不可能只有一点, 所以放在data里面不是很方便, 比如我的wrap现在只有一个, 但是我想让wrap变成6个写在html结构里面, 请小伙伴多多指教一下
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: [
        "监测点信息",
        "乔木分布",
        "径级分布",
        "重要值",
        "多样性分析",
        "数据展示"
      ],
      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;
    }
  }
};

Answer 1

把 box 的 v-if 去掉不就行了