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)