Vue v-if 指令


示例

使用v-if指令创建一个<div>如果条件为“真”,则为元素。

<div v-if="createImgDiv">
  <img src="/img_apple.svg" alt="apple">
  <p>This is an apple.</p>
</div>
运行示例 »

请参阅下面的更多示例。


定义和用法

这个v-if指令用于有条件地渲染元素。

什么时候v-if用于元素,它后面必须跟一个表达式:

  • 如果表达式的计算结果为“true”,则在 DOM 中创建该元素及其所有内容。
  • 如果表达式的计算结果为“假”,则该元素将被销毁。

当使用切换元素时v-if:

  • 我们可以使用内置的<Transition>当元素进入和离开 DOM 时要动画化的组件。
  • 诸如“mounted”和“unmounted”之类的生命周期钩子被触发。

笔记:不建议使用v-ifv-for在同一个标​​签上。如果两个指令都用在同一个标​​签上,v-if将无权访问所使用的变量v-for, 因为v-if优先级高于v-for


条件渲染指令

本概述描述了如何一起使用用于条件渲染的不同 Vue 指令。

指令 细节
v-if 可单独使用,或与v-else-if和/或v-else。如果里面的条件v-if是真的',v-else-if或者v-else不予考虑。
v-else-if 必须在之后使用v-if或其他v-else-if。如果里面的条件v-else-if是真的',v-else-if或者v-else之后的内容不予考虑。
v-else 如果 if 语句的第一部分为 false,则这部分将会发生。必须放在 if 语句的最末尾,之后v-ifv-else-if

更多示例

示例1

使用v-if以数据属性作为条件表达式,以及v-else

<p v-if="typewritersInStock">
  in stock
</p>

<p v-else>
  not in stock
</p>
亲自试一试 »

示例2

使用v-if以比较检查作为条件表达式,以及v-else

<p v-if="typewriterCount > 0">
  in stock
</p>

<p v-else>
  not in stock
</p>
亲自试一试 »

示例3

使用v-if和...一起v-else-ifv-else根据存储的打字机数量显示状态消息。

<p v-if="typewriterCount>3">
  In stock
</p>

<p v-else-if="typewriterCount>0">
  Very few left!
</p>

<p v-else>
  Not in stock
</p>
亲自试一试 »

示例4

使用v-if使用原生 JavaScript 方法作为条件表达式,以及v-else

<div id="app">
  <p v-if="text.includes('pizza')">The text includes the word 'pizza'</p>
  <p v-else>The word 'pizza' is not found in the text</p>
</div>
data() {
  return {
    text: 'I like taco, pizza, Thai beef salad, pho soup and tagine.'
  }
}
亲自试一试 »

示例5

使用v-if渲染一个<div>从 API 接收数据时标记。

<template>
  <h1>Example</h1>
  <p>Click the button to fetch data with an HTTP request.</p>
  <p>Each click generates an object with a random user from <a href="https://random-data-api.com/" target="_blank">https://random-data-api.com/</a>.</p>
  <p>The robot avatars are lovingly delivered by <a href="http://Robohash.org" target="_blank">RoboHash</a>.</p>
  <button @click="fetchData">Fetch data</button>
  <div v-if="data" id="dataDiv">
    <img :src="data.avatar" alt="avatar">
    <pre>{{ data.first_name + " " + data.last_name }}</pre>
    <p>"{{ data.employment.title }}"</p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        data: null,
      };
    },
    methods: {
      async fetchData() {      
        const response = await fetch("https://random-data-api.com/api/v2/users"); 
        this.data = await response.json();
      },    
    }
  };
</script>

<style>
#dataDiv {
  width: 240px;
  background-color: aquamarine;
  border: solid black 1px;
  margin-top: 10px;
  padding: 10px;
}
#dataDiv > img {
  width: 100%;
}
pre {
  font-size: larger;
  font-weight: bold;
}
</style>
运行示例 »

示例6

使用v-if创建一个组件,以便mounted生命周期钩子被触发。

CompOne.vue:

<template>
    <h2>Component</h2>
    <p>Right after this component is added to the DOM, the mounted() function is called and we can add code to that mounted() function. In this example, an alert popup box appears after this component is mounted.</p>
    <p><strong>Note:</strong> The reason that the alert is visible before the component is visible is because the alert is called before the browser gets to render the component to the screen.</p>
  </template>
  
  <script>
  export default {
    mounted() {
      alert("The component is mounted!");
    }
  }
  </script>

App.vue:

<template>
  <h1>The 'mounted' Lifecycle Hook</h1>
  <button @click="this.activeComp = !this.activeComp">Create component</button>
  <div>
    <comp-one v-if="activeComp"></comp-one>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeComp: false
    }
  }
}
</script>

<style scoped>
  div {
    border: dashed black 1px;
    border-radius: 10px;
    padding: 20px;
    margin: 10px;
    width: 400px;
    background-color: lightgreen;
  }
</style>
运行示例 »

示例7

使用v-if切换<p>元素以便触发动画。

<template>
  <h1>Add/Remove <p> Tag</h1>
  <button @click="this.exists = !this.exists">{{btnText}}</button><br>
  <Transition>
    <p v-if="exists">Hello World!</p>
  </Transition>
</template>

<script>
export default {
  data() {
    return {
      exists: false
    }
  },
  computed: {
    btnText() {
      if(this.exists) {
        return 'Remove';
      }
      else {
        return 'Add';
      }
    }
  }
}
</script>

<style scoped>
  .v-enter-from {
    opacity: 0;
    translate: -100px 0;
  }
  .v-enter-to {
    opacity: 1;
    translate: 0 0;
  }
  .v-leave-from {
    opacity: 1;
    translate: 0 0;
  }
  .v-leave-to {
    opacity: 0;
    translate: 100px 0;
  }
  p {
    background-color: lightgreen;
    display: inline-block;
    padding: 10px;
    transition: all 0.5s;
  }
</style>
运行示例 »

相关页面

Vue教程:Vue v-if 指令

Vue参考:Vue v-else-if 指令

Vue参考:Vue v-else 指令

Vue教程:Vue 动画

Vue教程:Vue 生命周期挂钩