個人理解vue-if的使用

一.vue-if的作用以及原理

動態顯示DOM元素。v-if是動態的向DOM樹內添加或者刪除DOM元素

二.vue-if的編譯條件

v-if是惰性的，如果初始條件為假，則什么也不做；只有在條件第一次變為真時才開始局部編譯。

三.實例

下面是vue中異步獲取數據的代碼：

export default {
    data() {
      return {
        seller: {}
      };
    },
    // 這里在模擬從后端獲取數據接口的步驟
    created() {
      this.$http.get('/api/seller').then((response) => {
        response = response.body;
        if (response.errno === ERR_OK) {
          this.seller = response.data;
          console.log(this.seller);
        }
      });
    },

我們知道vue的生命周期是先實例化vue對象然后在初始化數據，之后在實例創建完成之后才會調用created方法。所以在這里一開始初始化seller的時候，seller是空的，由於是異步獲取數據，所以在使用seller（假設這是一個json數據格式）的時候，先是對變量進行解析，需要使用到這個變量之后我們才會去使用鈎子函數進行異步獲取數據。

<template>
  <div class="header">
    <div class="content-wrapper">
      <div class="avatar">
        <img width="64" height="64" :src="seller.avatar">
      </div>
      <div class="content">
        <div class="title">
          <span class="brand"></span>
          <span class="name">{{seller.name}}</span>
        </div>
        <div class="description">
          {{seller.description}}/{{seller.deliveryTime}}分鍾送達
        </div>
        <div v-if="seller.supports" class="support">
          <span class="icon"></span>
          <span class="text">{{seller.supports[0].description}}</span>
        </div>
      </div>
    </div>
    <div class="bulletin-wrapper"></div>
  </div>
</template>

所以在.vue文件中必須先要做一個判斷，看看seller.supports（這是一個json數據中的數組）的元素是否為空，如果為空的話是不會有這個DOM元素的，否者由於seller在實例初始化還沒有調用 鈎子函數created的時候是空的，在實例創建完成，調用鈎子函數created之后才會有數據。