菜单
×
   ❮   
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

Vue 教程

Vue 首页 Vue Intro Vue Directives Vue v-bind Vue v-if Vue v-show Vue v-for Vue Events Vue v-on Vue Methods Vue Event Modifiers Vue Forms Vue v-model Vue CSS Binding Vue Computed Properties Vue Watchers Vue Templates

Scaling Up

Vue 为何、如何及设置 Vue 第一个 SFC 页面 Vue 组件 Vue Props Vue v-for 组件 Vue $emit() Vue 透传属性 Vue 作用域样式 Vue 局部组件 Vue 插槽 Vue v-slot Vue 作用域插槽 Vue 动态组件 Vue Teleport Vue HTTP 请求 Vue 模板引用 Vue 生命周期钩子 Vue Provide/Inject Vue 路由 Vue 表单输入 Vue 动画 Vue v-for 动画 Vue 构建 Vue 组合式 API

Vue Reference

Vue Built-in Attributes Vue Built-in Components Vue Built-in Elements Vue Component Instance Vue Directives Vue Instance Options Vue Lifecycle Hooks

Vue 示例

Vue Examples Vue Exercises Vue Quiz Vue Server Vue Certificate

Vue v-else-if 指令


示例

使用 v-else-if 指令在条件为 'true' 时创建 <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 中创建。
  • 如果表达式评估为 'false',则该元素将被销毁。

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

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

条件渲染指令

本概述描述了用于条件渲染的不同 Vue 指令是如何协同工作的。

指令 详情
v-if v-if 可以单独使用,也可以与 v-else-if 和/或 v-else 结合使用。如果 v-if 中的条件为“true”,则不考虑 v-else-ifv-else
v-else-if 必须在 v-if 或另一个 v-else-if 之后使用。如果 v-else-if 中的条件为“true”,则不考虑后续的 v-else-ifv-else
v-else 如果 if 语句的第一个部分为 false,则会执行此部分。必须放在 if 语句的最后,在 v-ifv-else-if 之后。

更多示例

示例 1

使用 v-else-if 在存储中只剩下 1、2 或 3 台打字机时显示“所剩无几!”。

<p v-if="typewriterCount>3">
  有货
</p>

<p v-else-if="typewriterCount>0">
  所剩不多!
</p>

<p v-else>
  缺货
</p>
自己动手试一试 »

示例 2

使用 v-else-if 在句子包含“burrito”时显示特定的文本和图像。

<div id="app">
  <div v-if="text.includes('pizza')">
    <p>文本包含“pizza”一词</p>
    <img src="img_pizza.svg">
  </div>
  <div v-else-if="text.includes('burrito')">
    <p>文本包含“burrito”一词,但不包含“pizza”</p>
    <img src="img_burrito.svg">
  </div>
  <p v-else>文本中未找到“pizza”或“burrito”一词</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 生命周期钩子


×

联系销售

如果您想将 W3Schools 服务用于教育机构、团队或企业,请发送电子邮件给我们
sales@w3schools.com

报告错误

如果您想报告错误,或想提出建议,请发送电子邮件给我们
help@w3schools.com

W3Schools 经过优化,旨在方便学习和培训。示例可能经过简化,以提高阅读和学习体验。教程、参考资料和示例会不断审查,以避免错误,但我们无法保证所有内容的完全正确性。使用 W3Schools 即表示您已阅读并接受我们的使用条款Cookie 和隐私政策

版权所有 1999-2024 Refsnes Data。保留所有权利。W3Schools 由 W3.CSS 提供支持