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 切换元素时：

• 当元素进入和离开 DOM 时，我们可以使用内置的 <Transition> 组件来设置动画。
• 会触发生命周期钩子，如 'mounted' 和 'unmounted'。

条件呈现指令

此概述描述了用于条件呈现的不同 Vue 指令是如何一起使用的。

更多实例

实例 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>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>