菜单
×
   ❮   
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 Fallthrough Attributes Vue Scoped Styling Vue 本地组件 Vue Slots Vue v-slot Vue Scoped Slots Vue 动态组件 Vue Teleport Vue HTTP 请求 Vue Template Refs Vue 生命周期钩子 Vue Provide/Inject Vue 路由 Vue 表单输入 Vue 动画 Vue v-for 动画 Vue 构建 Vue Composition 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 指令


示例

使用 v-else 指令,在上方所有条件都为“false”时创建一个 <div> 元素。

<p v-if="word === 'apple'">The word is 'apple'.</p>
<p v-else-if="word === 'pizza'">The word is 'pizza'</p>
<div v-else>
  <img src="/img_question.svg" alt="question mark">
  <p>The word is not 'apple', and it is not 'pizza'</p>
</div>
运行示例 »

更多示例请参见下方。


定义和用法

当 if 语句中上方所有条件求值为 'false' 时,v-else 指令用于渲染一个元素。

v-else 指令只能在具有 v-ifv-else-if 的元素之后使用。

v-else 指令在没有表达式的情况下使用。

v-else 导致元素切换

  • 我们可以使用内置的 <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

当打字机计数为 0 时,使用 v-else 编写“缺货”。

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

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

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

示例 2

当句子不包含 'pizza' 或 'burrito' 时,使用 v-else 显示特定文本。

<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 Thai beef salad, pho soup and tagine.'
      }
    }
  })
  app.mount('#app')
</script>
自己动手试一试 »

相关页面

Vue 教程:Vue v-if 指令

Vue 参考:Vue v-if 指令

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

Vue 教程: Vue 动画

Vue 教程:Vue 生命周期钩子


×

联系销售

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

报告错误

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

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

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