个人理解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之后才会有数据。

 

转载于:https://www.cnblogs.com/wucong1206/p/8462053.html