Vue v-else-if 指令


示例

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

<div v-if="word === 'apple'">
  <img src="/img_apple.svg" alt="apple" />
  <p>The value of the 'word' property is 'apple'.</p>
</div>
<div v-else-if="word === 'pizza'">
  <img src="/img_pizza.svg" alt="pizza" />
  <p>The value of the 'word' property is 'pizza'</p>
</div>
运行示例 »

请参阅下面的更多示例。


定义和用法

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

这个v-else-if指令只能在元素之后使用v-if,或在另一个元素之后v-else-if

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

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

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

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

条件渲染指令

本概述描述了如何一起使用用于条件渲染的不同 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-else-if如果存储中只剩下 1、2 或 3 台打字机,请写入 "Very few left!"。

<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>
亲自试一试 »

示例2

使用v-else-if如果句子包含“burrito”,则显示特定的文本和图片。

<div id="app">
  <div v-if="text.includes('pizza')">
    <p>The text includes the word 'pizza'</p>
    <img src="img_pizza.svg">
  </div>
  <div v-else-if="text.includes('burrito')">
    <p>The text includes the word 'burrito', but not 'pizza'</p>
    <img src="img_burrito.svg">
  </div>
  <p v-else>The words 'pizza' or 'burrito' are not found in the text</p>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  const app = Vue.createApp({
    data() {
      return {
        text: 'I like taco, pizza, Thai beef salad, pho soup and tagine.'
      }
    }
  })
  app.mount('#app')
</script>
亲自试一试 »

示例3

使用一个链v-else-if翻转图片,使用<Transition>组件来创建动画。

App.vue:

<template>
  <h1>mode="out-in"</h1>
  <p>Click the button to get a new image.</p>
  <p>With mode="out-in", the next image is not added until the current image is removed. Another difference from the previous example, is that here we use computed prop instead of a method.</p>
  <button @click="indexNbr++">Next image</button><br>
  <Transition mode="out-in">
    <img src="/img_pizza.svg" v-if="imgActive === 'pizza'">
    <img src="/img_apple.svg" v-else-if="imgActive === 'apple'">
    <img src="/img_cake.svg" v-else-if="imgActive === 'cake'">
    <img src="/img_fish.svg" v-else-if="imgActive === 'fish'">
    <img src="/img_rice.svg" v-else-if="imgActive === 'rice'">
  </Transition>
</template>

<script>
export default {
  data() {
    return {
      imgs: ['pizza', 'apple', 'cake', 'fish', 'rice'],
      indexNbr: 0
    }
  },
  computed: {
    imgActive() {
      if(this.indexNbr >= this.imgs.length) {
        this.indexNbr = 0;
      }
      return this.imgs[this.indexNbr];
    }
  }
}
</script>

<style scoped>
  .v-enter-active {
    animation: swirlAdded 0.7s;
  }
  .v-leave-active {
    animation: swirlAdded 0.7s reverse;
  }
  @keyframes swirlAdded {
    from {
      opacity: 0;
      rotate: 0;
      scale: 0.1;
    }
    to {
      opacity: 1;
      rotate: 360deg;
      scale: 1;
    }
  }
  img {
    width: 100px;
    margin: 20px;
  }
  img:hover {
    cursor: pointer;
  }
</style>
运行示例 »

相关页面

Vue教程:Vue v-if 指令

Vue参考:Vue v-if 指令

Vue参考:Vue v-else 指令

Vue教程:Vue 动画

Vue教程:Vue 生命周期挂钩