V-IF在获取数据里面使用

        <div class="swiper-container swiper-container-horizontal" id="swiper-container2" style="width:750px;">
          <div id="yun" class="swiper-wrapper" style="transition-duration:500ms; transform: translate3d(0px, 0px, 0px);">
            <div v-if="off" class="swiper-slide navb" >{{navbar[0].name}}</div>
            <div v-if="off" class="swiper-slide navb" >{{navbar[1].name}}</div>
            <div v-if="off" class="swiper-slide navb" >{{navbar[2].name}}</div>
            <div v-if="off" class="navb swiper-slide  swiper-slide-prev" >{{navbar[3].name}}</div>
            <div v-if="off" class="swiper-slide navb active-nav swiper-slide-visible swiper-slide-active" >{{navbar[4].name}}</div>
            <div v-if="off" class="swiper-slide navb swiper-slide-visible swiper-slide-next">{{navbar[5].name}}</div>
            <div v-if="off" class="swiper-slide navb  swiper-slide-visible">{{navbar[6].name}}</div>
            <div v-if="off" class="swiper-slide navb" >{{navbar[7].name}}</div>
            <div id="xian"></div>
          </div>
          <span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span></div>
        <div class="swiper-container swiper-container-horizontal" id="swiper-container3" style="width: 750px;">
          <div class="swiper-wrapper" style=" transition-duration: 500ms;transition: 500ms !important; transform: translate3d(0px, 0px, 0px);">
            <div class="swiper-slide navc blue-slide" style="width: 750px;">
              slider1</div>
            <div class="swiper-slide navc red-slide" style="width: 750px;">
              slider2</div>
            <div class="swiper-slide navc orange-slide" style="width: 750px;">
              slider3</div>
            <div class="swiper-slide navc blue-slide " style="width: 750px;">
              slider4</div>
            <div class="swiper-slide navc red-slide " style="width: 750px;">
              slider5</div>
            <div class="swiper-slide navc orange-slide " style="width: 750px;">
              slider6</div>
            <div class="swiper-slide navc blue-slide" style="width: 750px;">
              slider7</div>
            <div class="swiper-slide navc red-slide" style="width: 750px;">
              slider8</div>
          </div>
          <span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span></div>
    </div>
      </div>
   <Footer></Footer>
  </div>
  </div>
</template>

<script>
  import Footer from "../../base/v-footer";
  export default {
    components:{Footer},
    data() {
      return {
        active: 'tab-container1',
        navbar:[],
        off:false
      }
    },
    mounted(){
        this.$http.get('/api/recipe/class', {
            params: {"appkey": '916ee2f34354c51f'}
          }
        ).then((res) => {
          this.navbar = res.data.result[0].list;
          console.log(this.navbar);
          this.off=true
        })
      
      console.log(this.navbar)