Vue v-if 指令

示例

如果条件为"true"，则使用 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 中创建该元素及其所有内容。
如果表达式的计算结果为"false"，则元素将被销毁。

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

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

注意:不建议在同一个标签上使用 v-if 和 v-for。如果两个指令都用在同一个标签上，v-if 将无法访问 v-for 使用的变量，因为 v-if 的优先级高于 v-for。

条件渲染指令

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

指令	详细信息
`v-if`	可以单独使用，也可以与 `v-else-if` 和/或 `v-else` 一起使用。如果 `v-if` 内的条件为"true"，则不考虑 `v-else-if` 或 `v-else`。
`v-else-if`	必须在 `v-if` 或另一个 `v-else-if` 之后使用。如果 `v-else-if` 内的条件为"true"，则不考虑后面的 `v-else-if` 或 `v-else`。
`v-else`	如果 if 语句的第一部分为 false，则这部分将会发生。必须放置在 if 语句的最末尾，位于 `v-if` 和 `v-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-if 和 v-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

从 API 接收数据时使用 v-if 呈现 <div> 标签。

<template>
  <h1>示例</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>组件</h2>
    <p>将此组件添加到 DOM 后，立即调用 Mounted() 函数，我们可以向该 Mounted() 函数添加代码。 在本例中，该组件安装后会出现一个警告弹出框。</p>
    <p><strong>注意:</strong> 警报在组件可见之前可见的原因是因为警报是在浏览器将组件渲染到屏幕之前调用的。</p>
  </template>
  
  <script>
  export default {
    mounted() {
      alert("组件已安装！");
    }
  }
  </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>

运行示例 »